A React component wrapper around inclusive-menu-button.
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.storybook
dist Made it possible to pass class names for styling May 7, 2017
src
stories
.babelrc
.gitignore Added .gitignore Apr 30, 2017
README.md Made it possible to pass class names for styling May 7, 2017
package.json Bumped package.json version to 0.2.0 May 7, 2017

README.md

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.

<MenuButtonoptions={{ 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