Getting Started
  • Installation
Components
  • Alert
  • Badge
  • Button
  • Card
  • Checkbox
  • Drawer
  • Dropdown
  • Input
  • Modal
  • Overlay
  • Radio
  • Switch
  • Tabs
  • Tag
  • Toast
Advanced Components
  • Searchable Select
  • Datatable (Beta)
Toast
Datatable (Beta)

    Searchable Select #

    A component where you can perform both search and selection operations and customize your server-side requests.

    import { PSearchableSelect } from 'pearkit';

    Basic #

    Here is an example of how it is done. Here, we send a request to https://dummyjson.com/products, update our state named products and send it to the component. Here, the loader prop is triggered when the component status is true or the search status is true.

    Search & Select Product
    
    const [selected, setSelected] = useState({});
    const [products, setProducts] = useState([]);
    const [isPending, setIsPending] = useState(false);

    const loaderHandler = async (searchTerm) => {
        setIsPending(true);
        let url = 'https://dummyjson.com/products';
        if (searchTerm) {
            url += `/search?q=${searchTerm}`
        }
        const response = await axios.get(url);
        setProducts(response.data.products);
        setIsPending(false);
    }
    
    <PSearchableSelect
        selected={selected}
        selector={"title"}
        onChange={setSelected}
        placeholder={"Search & Select Product"}
        loader={loaderHandler}
        values={products}
        isPending={isPending}
    />

    Customizable Item Component #

    Here, when you write a separate component and assign it to the itemComponent property as a prop, you change the items in the lists and the selected item in the selection section. It was developed to give you a customizable structure.

    Search & Select Product
    
    const CustomItemComponent = (props) => {
        return (
            <div className="flex gap-2 items-center">
                <img src={props.images[0]} alt={props.title} className="size-6 w-auto"/>
                <span>{props.title}</span>
            </div>
        )
    }

    const [selected, setSelected] = useState({});
    const [products, setProducts] = useState([]);
    const [isPending, setIsPending] = useState(false);

    const loaderHandler = async (searchTerm) => {
        setIsPending(true);
        let url = 'https://dummyjson.com/products';
        if (searchTerm) {
            url += `/search?q=${searchTerm}`
        }
        const response = await axios.get(url);
        setProducts(response.data.products);
        setIsPending(false);
    }

    <PSearchableSelect
        selected={selected}
        selector={"title"}
        onChange={setSelected}
        placeholder={"Search & Select Product"}
        loader={loaderHandler}
        values={products}
        isPending={isPending}
        itemComponent={<CustomItemComponent />}
    />

    Disabled #

    You can manage this situation by writing the disabled property directly or by sending a boolean value.

    Search & Select Product
    <PSearchableSelect disabled />

    Focus Open #

    Tab key is focus the element and open automatically and focus search again.

    Search & Select Product
    <PSearchableSelect focusOpen />

    Accessibility (Not Ready Yet) #

    None

    Api #

    Here you can see all the working features for the alert component.

    NameTypeDefaultDescription
    selectedobject{}Selected object item of the component
    placeholderstringSearch & Select RecordPlaceholder of the component
    selectorstringnullIt is used as a selective index in the data stack.
    onChangefunctionvoidTrigger when select item
    loaderfunctionvoidTrigger when is status or search status changed
    colorTwColor | All tailwind color nameslimeColor of the component
    valuesObject[][]The chunk of data that must be sent after the request.
    itemComponentReact.ReactNodenullCustomizable item and selected area component
    focusOpenboolean | true | falsefalseTrigger open component on focus status
    isPendingboolean | true | falsefalseLoading status of the component content area
    disabledboolean | true | falsefalseControl status of the component