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 appearance prop defines the way how the CheckPicker will visually appear to the users. It has two options, it takes a value either “default” or “subtle”.
Syntax:
<CheckPicker appearance="" />
Prerequisite:
- Introduction and Installation reactJS
- React Suite CheckPicker Component
Creating React Application and Module installation:
Step 1: Create 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 a CheckPicker component and we are passing a list named data containing the names of countries to the data prop of the component to the placeholder and the appearance, we are passing “default”.
App.js
import { CheckPicker } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const countries = [{ label: "India", value: "India", }, { label: "Germany", value: "Germany", }, { label: "Sri Lanka", value: "Sri Lanka", }]; return ( <div className="App"> <h4> React Suite CheckPicker Appearance</h4> <p> <b style={{ marginLeft: 30 }}> appearance = "default" </b> </p> <CheckPicker placeholder="default" data={countries} appearance="default" style={{ marginLeft: 30, marginTop: 10 }} /> </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 adding a CheckPicker component and passing a list named data containing the names of countries to the data prop of the component to the placeholder and the appearance we are passing “subtle”.
App.js
import { CheckPicker } from "rsuite"; import "rsuite/dist/rsuite.min.css"; function App() { const countries = [{ label: "India", value: "India", }, { label: "Germany", value: "Germany", }, { label: "Sri Lanka", value: "Sri Lanka", }]; return ( <div className="App"> <h4> React Suite CheckPicker Appearance</h4> <p> <b style={{ marginLeft: 30 }}> appearance = "subtle" </b> </p> <CheckPicker placeholder="subtle" data={countries} appearance="subtle" style={{ marginLeft: 30, marginTop: 10 }} /> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/check-picker/#appearance
