@arnat/styled-dropdown

ARNT - styled-dropdown

Modular approach to use bootstrap components for quick prototypes, as an entrypoint of the component library.

Usage

import React, { useState } from 'react';

import { Button } from '@arnat/styled-button';
import { Dropdown, DropdownItem, DropdownMenu } from '@arnat/styled-dropdown';

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