Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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

About

A React component wrapper around inclusive-menu-button.

Resources

You can’t perform that action at this time.