Style for react-select-async-paginate

Question

How can I implement style of react-select-async-paginate? Is it possible?

import React, {useState} from 'react';
import {AsyncPaginate} from "react-select-async-paginate";
import {options as apiOptions, api_url} from "../../api/api.js";

const Search = ({placeholder, onSearchChange}) => {

    const [search, setSearch] = useState(null)

    const loadOptions = (inputValue) => {
    }

    const handleOnChange = (searchData) => {
        setSearch(searchData)
        onSearchChange(searchData)
    }

    return (
        <div className={"search-container"}>
            <AsyncPaginate
            debounceTimeout={1000}
            placeholder={placeholder}
            onChange={handleOnChange}
            loadOptions={loadOptions}/>
        </div>
    );
};

export default Search;

There is no info about it in the documentation.

Answer 1

You can use the styles prop. The styles prop is an object that allows you to customize the appearance of the different elements of the select component.

Here's an example of how you can implement custom styles:

import React, {useState} from 'react';
import {AsyncPaginate} from "react-select-async-paginate";
import {options as apiOptions, api_url} from "../../api/api.js";

const Search = ({placeholder, onSearchChange}) => {

    const [search, setSearch] = useState(null)

    const loadOptions = (inputValue) => {
        // implementation for loading options
    }

    const handleOnChange = (searchData) => {
        setSearch(searchData)
        onSearchChange(searchData)
    }

    // Custom styles
    const customStyles = {
        control: (provided, state) => ({
            ...provided,
            borderRadius: '5px',
            border: '2px solid #ccc',
            boxShadow: state.isFocused ? '0 0 0 2px #3699FF' : null,
        }),
        option: (provided, state) => ({
            ...provided,
            backgroundColor: state.isFocused ? '#3699FF' : null,
            color: state.isFocused ? 'white' : null,
        }),
    }

    return (
        <div className={"search-container"}>
            <AsyncPaginate
                debounceTimeout={1000}
                placeholder={placeholder}
                onChange={handleOnChange}
                loadOptions={loadOptions}
                styles={customStyles}
            />
        </div>
    );
};

export default Search;

Answer 2

Extending @Mile answer, for people using Typescript. You can use it as follows.

mport React, {useState} from 'react';
import {AsyncPaginate} from "react-select-async-paginate";
import { ControlProps } from "chakra-react-select" // import this to make ts happy
import {options as apiOptions, api_url} from "../../api/api.js";

const Search = ({placeholder, onSearchChange}) => {

    const [search, setSearch] = useState(null)

    const loadOptions = (inputValue) => {
        // implementation for loading options
    }

    const handleOnChange = (searchData) => {
        setSearch(searchData)
        onSearchChange(searchData)
    }

    // Custom styles
    const customStyles = {
        // provide correct types here
        control: (provided: ControlProps, state: { isFocused: boolean }) => ({
            ...provided,
            borderRadius: '5px',
            border: '2px solid #ccc',
            boxShadow: state.isFocused ? '0 0 0 2px #3699FF' : null,
        }),
        option: (provided: ControlProps, state: { isFocused: boolean }) => ({
            ...provided,
            backgroundColor: state.isFocused ? '#3699FF' : null,
            color: state.isFocused ? 'white' : null,
        }),
    }

    return (
        <div className={"search-container"}>
            <AsyncPaginate
                debounceTimeout={1000}
                placeholder={placeholder}
                onChange={handleOnChange}
                loadOptions={loadOptions}
                styles={customStyles}
            />
        </div>
    );
};

export default Search;