epic-select-react

> A powerful Select Element library.

 

Install

``bash
npm install --save epic-select-react
`

Usage

$3

`tsx
import React, { useEffect, useState } from "react";

import EpicSelect from "epic-select-react";

const App = () => (
<>
placeholder="Choose an option"
// Add Options
options={[
{
label: "Graphics Design",
value: "graphics-design",
},
{
label: "Programming & Tech",
value: "programming-tech",
},
]}
required
/>

);

export default App;
`

$3

`tsx
import React, { useEffect, useState } from "react";

import EpicSelect, { OptionsBuilder } from "epic-select-react";

const App = () => {
const data = [
{
title: "Graphics Design",
slug: "graphics-design",
},
{
title: "Programming & Tech",
slug: "programming-tech",
},
];

const [controlsState, setControlsState] = useState({} as any);
const [loadingState, setLoadingState] = useState(true);

useEffect(() => {
// Might Load Data From API
setTimeout(() => setLoadingState(false), 3000);
}, []);

return (
<>
placeholder="Choose an option"
// Add Custom Classes
className={{
container: (provider) => [
...provider,
"border-top border-left border-right border-bottom",
],
input: (provider) => [...provider, "py-4"],
optionsContainer: (provider) => [
...provider,
"shadow border-top border-left border-right border-bottom",
],
}}
// Add Custom Styles
style={{
input: (provider) => ({
...provider,
color: "white",
backgroundColor: "Highlight",
"&::placeholder": {
color: "white",
},
}),
button: (provider) => ({ ...provider, color: "white" }),
}}
// Add Options
options={OptionsBuilder(data, (value, preparer) =>
preparer(value.title, value.slug)
)}
// Initial Value (Optional)
value="graphics-design"
// Handle On Value Change
onChange={(value) => console.log(value)}
// Compnent States
isSearchable
isLoading={loadingState}
isResetable
isClearable
isDisabled={false}
// Change Layout
layoutRight={false}
// Get Controls
// Returns a function to get latest selected value
getSelected={(getter) =>
setControlsState((value: any) => {
value.getter = getter;
return value;
})
}
// Returns a function to reset component
getResetter={(resetter) =>
setControlsState((value: any) => {
value.resetter = resetter;
return value;
})
}
// Returns a function to clear component
getClearer={(clearer) =>
setControlsState((value: any) => {
value.clearer = clearer;
return value;
})
}
/>

{/ Create Separate Controls If Needed /}
onClick={() => {
if (controlsState.getter) console.log(controlsState.getter());
}}
>
Get Value


onClick={() => {
if (controlsState.resetter) controlsState.resetter();
}}
>
Reset


onClick={() => {
if (controlsState.clearer) controlsState.clearer();
}}
>
Clear


);
};

export default App;
``

License

MIT © Saff-Elli-Khan