1.0.0 • Published 3 years ago

@shapla/react-dropdown v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

Shapla React Dropdown

A simple and interactive dropdown menu for discoverable content for React

Table of contents

Installation

npm install --save @shapla/react-dropdown

Usage

Styles

with Sass:

import '@shapla/react-dropdown/src/index.scss';

with CSS:

import '@shapla/react-dropdown/dist/dropdown.css';

Javascript Instantiation

import React from 'react';
import Dropdown from '@shapla/react-dropdown';

class MyApp extends React.Component {
  render() {
    return (
      <Dropdown trigger={<button>From Left: Click</button>} hoverable={false}>
        <a href="https://example.com" className="shapla-dropdown-item is-link is-active">Link 1</a>
        <a href="https://example.com" className="shapla-dropdown-item is-link">Link 2</a>
        <span className="shapla-dropdown-divider"></span>
        <a href="https://example.com" className="shapla-dropdown-item is-link">Link 3</a>
        <a href="https://example.com" className="shapla-dropdown-item is-link">Link 4</a>
      </Dropdown>
    );
  }
}

Props

PropertyTypeRequiredDefaultDescription
hoverableBooleannotrueIf set true, the dropdown will show up when hovering the trigger slot.
rightBooleannofalseSet true to have a right-aligned dropdown.
roleStringnomenuRole of component. Mostly for accessibility.
directionBooleannoautoValue can be auto, up, down