@flexcodelabs/dropdown

Package Name

• Features
• Installation
• Usage
• Examples
• Props

Features

• List of features

Installation

npm install @flexcodelabs/dropdown

or

yarn add @flexcodelabs/dropdown

Usage

...
import Dropdown from '@flexcodelabs/dropdown';

const Test = () => {
  const [open, setOpen] = React.useState(false);
  const Children = () => {
    return (
      <div
        style={{
          backgroundColor: "white",
          boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.1)",
          padding: "10px",
          display: "flex",
          flexDirection: "column",
          alignItems: "flex-start",
          gap: "10px",
          width: "200px",
        }}
      >
        <button
          onClick={() => setOpen(!open)}
          style={{
            backgroundColor: "transparent",
            border: "none",
            fontSize: 16,
            padding: 0,
          }}
        >
          Closes dropdown
        </button>
        <li
          style={{
            backgroundColor: "transparent",
            border: "none",
            listStyle: "none",
            fontSize: 16,
          }}
        >
          List Item
        </li>
      </div>
    );
  };
  const Toggle = (
    <div>
      <button onClick={() => setOpen(!open)}>Toggle</button>
    </div>
  );

  return (
    <div>
      <div
        style={{
          position: "relative",
        }}
      >
        <Dropdown
          open="up"
          Toggle={Toggle}
          isOpen={open}
          close={() => setOpen(false)}
        >
          <Children />
        </Dropdown>
      </div>
    </div>
  );
};
/>

Examples

Source code

Props

| Name | Type | Default | Required | Description | | -------------- | ---------------------------------------------------------------------------- | ------- | -------- | ----------------------------- | | Toggle | ReactNode | null | true | Toggle component | | children | reactNode | null | true | Dropdown contents | | className | string | null | false | | | isOpen | boolean | null | false | dropdown open status | | close | Func() | null | false | close dropdown function | | style | CSSProperties | null | false | custom styles | | dropdownstyles | CSSProperties | null | false | custom dropdown styles | | open | left, right, up, down, left-center, down-center, up-center or right-center | down | false | open position of the dropdown |