@shapla/react-dropdown
v1.0.0
Published
A simple and interactive dropdown menu for discoverable content for React
Downloads
2
Maintainers
Readme
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
| Property | Type | Required | Default | Description
|---------------|-----------|-----------|-----------|---------------------------------------------------------------------------
| hoverable
| Boolean | no | true
| If set true
, the dropdown will show up when hovering the trigger slot.
| right
| Boolean | no | false
| Set true
to have a right-aligned dropdown.
| role
| String | no | menu
| Role of component. Mostly for accessibility.
| direction
| Boolean | no | auto
| Value can be auto
, up
, down