@chantelle/pl-dropdown

The Dropdown component of the Chantelle Pattern Library

Usage no npm install needed!

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

README

Dropdown

Installation

yarn add @chantelle/pl-dropdown

Usage

First, include the CSS in your HTML:

<link rel="stylesheet" href="node_modules/@chantelle/pl-dropdown/build/css/main.css">

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

 import '@chantelle/pl-dropdown/build/css/main.css';

React Component

import { Dropdown } from '@chantelle/pl-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.