Skip to content

kocierik/dropify

Repository files navigation


useWorker

GitHub GitHub TypeScript Support


🎨 Features

  • Run asynchronous function
  • Supports Promises
  • Typescript support

💾 Install

  • @latest
npm install --save @kocierik/dropify

🔨 Import

import { DropDown, Setting } from "@kocierik/dropify";

📙 Documents


🐾 Usage DropDown

import { DropDown } from '@kocierik/dropify';

const App = () => {
  const list = ['a', 'b', 'c', 'd']
  const [filter, setFilter] = React.useState([])
  return (
    <div className='flex flex-1 p-5'>
      <div>
        <DropDown label={'label'} list={list} filter={filter} setFilter={setFilter} />
      </div>
      <div className='p-5 flex-row flex'>
        {filter.map((item, index) => {
          return <div key={index} className='p-5'>{item}</div>;
        })
        }
      </div>
    </div>
  );
};

🐾 Usage Setting

import { Setting } from '@kocierik/dropify';

const App = () => {
  const setting: Isetting[] = [{
    label: 'helper',
    handler: () => {
      alert('help!')
    }
  }, {
    label: 'Click me',
    handler: () => {
      alert('clicked!')
    }
  }
  ]
  return (
    <div className='flex flex-1 p-5'>
      <Setting settings={setting} />
    </div>
  );
};

🖼 Live Demo

dropdown demo setting demo

🔧 Roadmap

  • [] Add more components
  • [] Add more style
  • [] Add animation

🌏 Contribute? Bug? New Feature?

The library is experimental so if you find a bug or would like to request a new feature, open an issue


💻 Mantainers


📜 License

MIT