npm

Need private packages and team management tools?Check out npm Orgs. »

styled-dropdown-component

4.0.0 • Public • Published

styled-dropdown-component

npm Travis branch Codecov branch storybook lerna

The bootstrap dropdown component made with styled-components.

This is a modular approach to use bootstrap 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.

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.

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

install

npm i styled-dropdown-component

Downloadsweekly downloads

542

version

4.0.0

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability