bymax-react-select
v1.0.12
Published
A flexible and beautiful selection component for ReactJS, featuring support for multi-select, single-select, and search.
Downloads
26
Maintainers
Readme
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
- 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
Sponsor
Was I able to help you? Buy me a coffee!