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.

score 2 · Answer 1 · answered Apr 11 '23 at 18:36

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;

Style for react-select-async-paginate

1 Answers1