1.1.3 • Published 3 years ago
easy-select-react v1.1.3
✍️ CUSTOM SELECT / DROPDOWN ✍️
npm i easy-select-react
I always struggle to use HTML5 <select>
and packages are sometimes overcomplicated for just a simple dropdown.
But... I am not really a fun of frameworks like Bootstrap, so I made my own! 👻
Here is what it looks like...
I made a React version (can be used with or without typescript) and a vanilla JS/HTML/CSS version! 📚
Documentation:
Styling:
CSS Class | Changes |
---|---|
select__wrap | Width, height, border-radius, bg color, text color. |
select__options | Width of options, border-radius of dropdown. |
single-option | Height of options, padding, border + bg color. |
React:
If you are already working on an app created with
create-react-app
you will not need to install anything.
Interfaces:
Interface | Use |
---|---|
Option | Single option. val will be passed to the parent component, display will be displayed on the interface. |
OptionClass | Constructor for Options, use to create the array for the options prop. |
Props:
Prop | Use / Type |
---|---|
options | Array of Option |
selectedOpt | Function that should set Option["val"] in the state (see example) |