Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including react-accessible-select-box with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactAccessibleSelectBox = require("react-accessible-select-box")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-accessible-select-box v1.0.1

A custom dropdown implementation in React that is fully accessible.

react-accessible-select-box

A custom dropdown implementation in React that is fully accessible.

NPM JavaScript Style Guide

Important things to note

  1. This is not a full replacement to the browser-default dropdown, it is rather a custom implementation of it which allows developers to stylize the dropdown menu.
  2. Out of the box, there won't be any styles, it is just a button and a list of unordered list-items. It is up to the developer to stylize the menu and button based on their requirement.
  3. If they want a starter styling, they may include a sample stylesheet (as mentioned below).
  4. Developer may find appropriate classes getting added to the menu and button, using which they may stylize the dropdown.

Install

npm install --save react-accessible-select-box

Usage

import React, { Component } from 'react'

import Select from 'react-accessible-select-box'

class Example extends Component {
  render () {
    return (
      <Select />
    )
  }
}

Sample styles

If you want starter styles to the dropdown menu, you may use the below import to use the default styles.

import './node_modules/react-accessible-select-box/dist/select-box.css';

Example

Create a StackBlitz demo page.

License

MIT © ChaituKNag

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free