React Suite CheckPicker Disabled Search

Last Updated : 14 Jul, 2022

React Suite is a front-end library designed for the middle platform and back-end products. React Suite CheckPicker component is used as multiple selectors of data. We can also group data using this component.

The Disabled Search is created using searchable props in the React Suite CheckPicker that takes a boolean value. It denotes whether the display searches the input box or not. It is true by default.

Syntax:

<CheckPicker searchable={}/>

Prerequisite:

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder_name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: now install the dependency by using the following command:

npm install rsuite

Project Structure: It will look like this:

Example 1: We are importing the CheckPicker Component from “rsuite” and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding two CheckPicker components and added some styles to it. For the first, we just passed the placeholder as “default” and for the second we passed the placeholder as “non-searchable” and the searchable prop as false.

App.js

import { CheckPicker } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    return ( 
        <div className="App"> 
            <h4> React Suite Disabled Search</h4> 
  
            <CheckPicker placeholder="default" 
                style={{ marginLeft: 10 }} /> 
            <CheckPicker placeholder="non-searchable" 
                searchable={false} /> 
        </div> 
    ); 
} 
  
export default App;

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Output:

Example 2: We are importing the CheckPicker Component from “rsuite” and applying the default styles of the components we are importing “rsuite/dist/rsuite.min.css”.

We are adding data prop to the CheckPicker component as countries, which is a list of countries’ names, We are adding the picker component using the useRef hook, and named it as checkPicker and will pass it to the ref prop of the component. We are adding a button with a label as the state-defined searchBool created using react hook useState, added an onClick function that will call the onHandleChange function that will change the current state of the serachBool and checkPicker.current.open() will keep the component open.

App.js

import { useState, useRef } from "react"; 
import { CheckPicker } from "rsuite"; 
import "rsuite/dist/rsuite.min.css"; 
  
function App() { 
    const checkPicker = useRef(); 
    const [searchBool, setSearchBool] = useState(true); 
  
    const onHandleChange = () => { 
        setSearchBool(!searchBool); 
        checkPicker.current.open(); 
    }; 
    const countries = [ 
        { 
            label: "India", 
            value: "India", 
        }, 
        { 
            label: "Germany", 
            value: "Germany", 
        }, 
        { 
            label: "Sri Lanka", 
            value: "Sri Lanka", 
        }, 
    ]; 
    return ( 
        <div className="App"> 
            <h4> React Suite Disabled Search </h4> 
            <b style={{ marginLeft: 10 }}>searchable?</b> 
  
            <button 
                onClick={onHandleChange} 
                style={{  
                    marginLeft: 10,  
                    fontSize: 15,  
                    padding: 10  
                }} 
            > 
                {"" + searchBool} 
            </button> 
  
            <CheckPicker 
                data={countries} 
                ref={checkPicker} 
                style={{ marginLeft: 10 }} 
                searchable={searchBool} 
            /> 
        </div> 
    ); 
} 
  
export default App;