❤
npm
Sign UpSign In

react-menu-button

0.2.0 • Public • Published

React MenuButton

react-menu-button is a React component for inclusive-menu-button meant to ease the use of accessible menu buttons in React applications.

Install

npm install --save react-menu-button

Usage

There are 3 required properties for the menu-button component:

  • id: the id attribute used internally by inclusive-menu-button to connect the button element and its menu.
  • label: the text content for the button element.
  • children: children to be rendered as the content of the menu (they should render <button> elements).

Examples

Play with examples in the storybook playground.

const MenuButton = require('react-menu-button')
 
const DifficultyMenu = (props) => (
  <MenuButton
    id='difficulty'
    label='Difficulty'
  >
    <button type='button'>Easy</button>
    <button type='button'>Medium</button>
    <button type='button'>Hard</button>
  </MenuButton>
)
 
ReactDOM.render(
  <DifficultyMenu />,
  document.getElementById('root')
)

More complex example using the inclusive-menu-button instance to programmatically use its API.

const MenuButton = require('react-menu-button')
 
class DifficultyMenu extends React.Component {
  constructor (props) {
    super(props)
 
    this.saveMenuRef = this.saveMenuRef.bind(this)
    this.state = { choice: null }
  }
 
  saveMenuRef (ref) {
    this.menu = ref
  }
 
  componentDidMount () {
    this.menu.on('choose', choice => {
      this.setState({ choice: choice.innerText })
    })
  }
 
  render () {
    let label = 'Difficulty'
 
    if (this.state.choice) {
      label += ' ' + this.state.choice
    }
 
    return (
      <MenuButton
        id='difficulty'
        label={label}
        menuRef={this.saveMenuRef}
      >
        <button type='button'>Easy</button>
        <button type='button'>Medium</button>
        <button type='button'>Hard</button>
      </MenuButton>
    )
  }
}

Inclusive-menu-button constructor options

In version 0.1.1, inclusive-menu-button introduced an optional object as second argument for its constructor to define settings for the menu instance. This object can be passed as an options prop.

<MenuButton … options={{ checkable: 'many' }}>
  …
</MenuButton>

Styling and class names

You can pass class names to the different parts of the menu button with props:

  • className for the wrapper
  • buttonClassName for the button
  • menuClassName for the menu

Readme

Keywords

Package Sidebar

Install

npm i react-menu-button

Repository

github.com/HugoGiraudel/react-a11y-dialog

Homepage

github.com/HugoGiraudel/react-menu-button

Weekly Downloads

5

Version

0.2.0

License

none

Last publish

Collaborators

  • kittygiraudel
Try on RunKit
Report malware