kocierik / dropify

Dropify - A simple library with some useful component

Home Page:https://www.npmjs.com/package/@kocierik/dropify

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool


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


About

Dropify - A simple library with some useful component

https://www.npmjs.com/package/@kocierik/dropify

License:MIT License


Languages

Language:TypeScript 82.1%Language:JavaScript 13.8%Language:HTML 3.5%Language:CSS 0.6%