styled-dropdown-component
Version:
The bootstrap dropdown component created with styled-components
71 lines (53 loc) • 2.72 kB
Markdown
# styled-dropdown-component
[](https://www.npmjs.com/package/styled-dropdown-component)
[](https://travis-ci.org/aichbauer/styled-bootstrap-components)
[](https://codecov.io/gh/aichbauer/styled-bootstrap-components)
[](https://aichbauer.github.io/styled-bootstrap-components)
[](https://lernajs.io/)
> The [bootstrap](https://getbootstrap.com) dropdown component made with [styled-components](https://styled-components.com).
This is a modular approach to use [bootstrap](https://getbootstrap.com)
components for quick prototypes, as an entrypoint of your own component
library, or if you need just one bootstrap component for your application.
## Installation
> Note: this component has a peer dependency on `styled-components` > v4. To use this component you also need to `npm i styled-components -S`.
```sh
npm install --save styled-dropdown-component
npm install --save styled-components@^4.1.3 react@^16.7.0 # Peer dependencies
```
## Usage
For detailed information take a look at the [documentation](https://aichbauer.github.io/styled-bootstrap-components).
```jsx
import React, { useState } from 'react';
import { Button } from 'styled-button-component';
import {
Dropdown,
DropdownItem,
DropdownMenu,
} from 'styled-dropdown-component';
export const SimpleDropdown = () => {
const [hidden, setHidden] = useState(true);
return (
<Dropdown>
<Button dropdownToggle onClick={() => setHidden(!hidden)}>
Dropdown Button
</Button>
<DropdownMenu hidden={hidden} toggle={() => setHidden(!hidden)}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownDivider />
<DropdownItem>Action after divider</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
```
## Properties
Properties which can be added to the component to change the visual appearance.
* `active` only on DropdownItem **Type**: boolean
* `hidden` only on DropdownMenu **Type**: boolean
* `noRadius` only on DropdownMenu **Type**: boolean
* `right` only on DropdownMenu **Type**: boolean
* `fullWidth` only on DropdownMenu **Type**: boolean
* `toggle` only on DropdownMenu **Type**: boolean
## License
MIT © Lukas Aichbauer