React Suite CheckPicker Extra footer

Last Updated : 04 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 renderExtraFooter in the React Suite CheckPicker provides a way to add an extra footer to the CheckPicker, which we can further customize in our own way. This footer can be used to provide further additional functionalities to the CheckPicker component and can enhance the user interface.

React Suite CheckPicker Extra footer Attributes/Props:

renderExtraFooter: This is used to add an extra footer to the CheckPicker, which we can further customize in our own way.

Syntax:

<CheckPicker renderExtraFooter={}/>

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 to apply the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

Now to the CheckPicker component, we are customizing an extra footer using renderExtraFooter. We are adding a div with some styling as the footer of the CheckPicker.

App.js

import { CheckPicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    return (
        <div className="App">
            <h4>
                React Suite CheckPicker Extra footer 
            </h4>
            <div style={{ marginLeft: 10 }}>
                <CheckPicker
                    placeholder="select"
                    renderExtraFooter={() => (
                        <div style={{ 
                                backgroundColor: "green", 
                                padding: 10, 
                                color: "white" 
                            }}>
                            <h4>Extra Footer</h4>
                        </div>
                    )}
                />
            </div>
        </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 to apply the default styles of the components we are importing "rsuite/dist/rsuite.min.css".

We are further customizing the CheckPicker extra footer component further by adding a button with an onclick named as onCloseHandle a function that closes the dropdown of the component and shows a "CheckPicker will close !" in the alert.

We are adding data prop to the CheckPicker component as countries, which is a list of countries' names, we are adding a placeholder as " select countries", We are adding the picker component using the useRef hook, and named it as checkPicker.We are adding a button with a label close, that will call the onCloseHandle function on clicking in the extra footer component.

App.js

import { useRef } from "react";
import { CheckPicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";

function App() {
    const checkPicker = useRef();
    //data
    const countries = [
        {
            label: "India",
            value: "India",
        },
        {
            label: "Germany",
            value: "Germany",
        },
        {
            label: "Sri Lanka",
            value: "Sri Lanka",
        },
    ];

    const onCloseHandle = () => {
        checkPicker.current.close();
        alert(" CheckPicker  will close!");
    };
    return (
        <div className="App">
            <h4> 
                React Suite CheckPicker Extra footer 
            </h4>
            <div style={{ marginLeft: 10 }}>
                <CheckPicker
                    placeholder="Select Countries"
                    data={countries}
                    ref={checkPicker}
                    renderExtraFooter={() => (
                        <div style={{ 
                                backgroundColor: "green", 
                                padding: 10, 
                                color: "white" 
                            }}>
                            <button
                                style={{
                                    border: "2px solid white",
                                    backgroundColor: "transparent",
                                }}
                                onClick={onCloseHandle}>
                                close
                            </button>
                        </div>
                    )}
                />
            </div>
        </div>
    );
}
export default App;