Yumkit Dropdown

A simple and customizable dropdown component for React

Install

npm i @juissy/dropdown
or
yarn add @juissy/dropdown

Features

• Auto positioning (vertical & horizontal)
• Custom animations
• Dropdown offsets
• Builtin typescript definitions

Examples

• Simple
• Css animation with transition-group
• React-spring animation

Usage

import React from 'react';
import Dropdown from '@juissy/dropdown';

export default function App() {
  const [opened, setOpened] = React.useState(false);

  return (
    <Dropdown
      isOpened={opened}
      renderDropdown={({state, content, ref, style}) =>
        state !== 'closed' && <div ref={ref} style={style}>{content}<div>
      }
      renderContent={() => <div>Your dropdown content is here</div>}
    >
      <button onClick={() => {setOpened(!opened)}}>Click me</button>
    </Drodpown>
  )
}

API

ToDo

License

MIT. Copyright (c) Anton Ignatev.