epic-select-react

A powerful Select Element library.

Install

npm install --save epic-select-react

Usage

Basic Usage

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

import EpicSelect from "epic-select-react";

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

export default App;

Advanced Usage

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 (
    <>
      <EpicSelect
        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 */}
      <button
        onClick={() => {
          if (controlsState.getter) console.log(controlsState.getter());
        }}
      >
        Get Value
      </button>

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

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

export default App;

License

MIT © Saff-Elli-Khan