bymax React Select component

Is a component created using the react-select component, a flexible and beautiful select input control for ReactJS with multiselect, singleselect and search system.

Customized to facilitate its use, it has an animation feature with its placeholder text which can be used as the title of the component and properties that help in integration with the formik forms component.

The bymax React Select component was designed for use in forms that work with cryptocurrencies, but it was also developed to work with any type of data.

Getting Started

Installation

npm i bymax-react-select --save

or

yarn add bymax-react-select

Usage

JavaScript Example

App.js

import React, { useMemo, useState } from "react";
import { Select } from "bymax-react-select";

export default function App() {
  const options = useMemo(() => [
      {
        id: 1, // acts as primary key, should be unique and non-empty
        value: "BTC",
        label: "Bitcoin",
        image: "path to your images/image.svg",
        base: "BTC",
        quote: "USDT",
      },
      {
        id: 2,
        value: "eth",
        label: "Ethereum",
        base: "ETH",
      },
      {
        id: 3,
        value: "sol",
        label: "Solana",
      },
    ],[]);

  const [value, setValue] = useState(options[0]);

  return (
    <Select
      id="example-id"
      value={value}
      isMulti={false}
      isClearable={true}
      options={options}
      placeholder="Select a coin"
      noOptionsMessage="No coins found"
      onChange={(selectedOption) =>
        setValue(selectedOption)
      }
    />
  );
}

TypeScript Example

App.tsx

import React, { useMemo, useState } from "react";
import { Select, Option } from "bymax-react-select";

export default function App() {
  const options: Option[] = useMemo(() => [
    {
      id: "1", // acts as primary key, should be unique and non-empty
      value: "BTC",
      label: "Bitcoin",
      image: "path to your images/image.svg",
      base: "BTC",
      quote: "USDT",
    },
    {
      id: "2",
      value: "eth",
      label: "Ethereum",
      base: "ETH",
    },
    {
      id: "3",
      value: "sol",
      label: "Solana",
    },
  ], []);

  const [value, setValue] = useState<Option | Option[] | null>(options[0]);

  return (
    <Select
      id="example-id"
      value={value}
      isMulti={true}
      isClearable={true}
      options={options}
      placeholder="Select a coin"
      noOptionsMessage="No coins found"
      onChange={(selectedOption) =>
        setValue(selectedOption)
      }
    />
  );
}

Props

• id: Identifier
• value: Current value, must be an object as follows: { id: '', value: '', label: '', image: '', base: '', quote: '' }
• isMulti: Allows you to choose several options (true: Multi Selection | false: Single selection)
• isInvalid: Data verification status (true: Changes the component's border color to red | false: Maintains the component's border color respecting the applied style)
• isLocked: Shows the value and blocks the component, preventing it from changing its value (true: enable | false: disable)
• isDisabled: Changes the value to empty ("") and blocks the component, not allowing it to change its value (true: enable | false: disable)
• isClearable: Allows you to delete the content of the component in value by clicking on the X icon (true: enable | false: disable)
• options: Items that are shown by the component, must be an object as follows: { id: '', value: '', label: '', image: '', base: '', quote: '' } - id: Value identifier (Required) - value: Value of the item (Required) - label: Text shown by the component. If the base AND quote is entered, the base/quote will be shown as text, otherwise only the label (Required) - image: Icon that will be shown next to the text (Optional) - base: Base currency (Optional) - quote: Quote currency (Optional)
• placeholder: Component title
• noOptionsMessage: Message shown when there is no search result
• isLoading: Controls the display of the loading indicator
• loadingMessage: Message shown during loading
• styles: Define custom CSS styles
• onChange: Function that returns every time the component's value is changed (Returns the complete object chosen in options)
• onFormikChange: Function for integration with the Formik component, triggered every time the component's value changes
• onFormikBlur: Function for integration with the Formik component, triggered every time the component loses focus

Contributions

Fork and create a pull request

License

MIT License

Sponsor

Was I able to help you? Buy me a coffee!

Bitcoin:  bc1qx0jwnwkum3xxz77ge86qgpumk4plzgrkmxh5aw

Ethereum:  0xb3718C66311eFcC7a868973205E0Dca6dB05822e

Solana:  9GZ6sJj6xHbH2KdgMz1WEmJ86HUmSMgxkszwVjhnRfky

Polygon:  0xb3718C66311eFcC7a868973205E0Dca6dB05822e