React Searchable Field - React.js Component

React Searchable Select Field

Install

npm install --save react-searchable-selectfield

or,

yarn add react-searchable-selectfield

Usage

import React, { useState } from "react"
import { SelectField } from 'react-searchable-selectfield'
// If css is not being loaded
import 'react-searchable-selectfield/dist/index.css' 

const App = () => {
    const [selecteData, setSelecteData] = useState({});

    const options = [
      { value: 'chocolate', label: 'Chocolate' },
      { value: 'strawberry', label: 'Strawberry' },
      { value: 'vanilla', label: 'Vanilla' },
    ];

    const onChange = (data: { label: String, value: string }) => {
        setSelecteData(data);
    }
    console.log(selecteData);

    return (
        <form>
           <SelectField
             labelName='Foods'
             name='example'
             onChange={onChange}
            />
        </form>
    )
}

export default App;

Suppported Props:

    className?: string;
    btnClassName?: string;
    labelName?: string;
    hoverInfo?: string;
    name: string;
    options: { label: string, value: string }[];
    placeholder?: string
    onChange: (data: { label: string, value: string }) => void;
    isEditable?: boolean
    pending?: boolean;
    defaultValue?: string
    isTableMode?: boolean
    isDisabled?: boolean
    fallBackPath?: string
    children?: React.ReactElement
    handleRouteClick?: () => void
    parentClassName?: string
    notFoundText?: string
    style?: React.CSSProperties

License

ISC © https://github.com/AchyutPL