@chantelle/dropdown

The Dropdown component of the Chantelle Pattern Library

Usage no npm install needed!

<script type="module">
  import chantelleDropdown from 'https://cdn.skypack.dev/@chantelle/dropdown';
</script>

README

Dropdown

Installation

yarn add @chantelle/dropdown

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/dropdown/dist/styles.css">

Note: you can import the CSS directly into your project if your bundler supports it:

 import '@chantelle/dropdown/dist/styles.css';

React Component

import { Dropdown } from '@chantelle/dropdown';

ReactDOM.render(
   <Dropdown
     options={options}
     value={defaultOption}
     placeholder="Select an option"
     className=""
     listClassName=""
   />,
  container
);

State

Dropdown with disabled attribute already apply the disabled styles. The .pl-dropdown--disabled class is reserved for links that have the .pl-dropdown class.