Skip to content
Related Articles

Related Articles

React Suite CheckTreePicker Placement

Improve Article
Save Article
  • Last Updated : 26 Jun, 2022
Improve Article
Save Article

React Suite is a front-end library designed for the middle platform and back-end products. React Suite CheckTreePicker component is used as multiple selectors for multiple selections of complex data structures.

The placement of the React Suite CheckTreePicker component defines the position of the CheckTreePicker. It takes these values – ‘bottomStart’, ‘bottomEnd’, ‘topStart’, ‘topEnd’, ‘leftStart’, ‘leftEnd’, ‘rightStart’, ‘rightEnd’, ‘auto’, ‘autoVerticalStart’, ‘autoVerticalEnd’, ‘autoHorizontalStart’, ‘autoHorizontalEnd’.

Syntax:

 <CheckTreePicker placement=""/>

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 CheckTreePicker Component from “rsuite” and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. Now to the CheckTreePicker component, we are passing different values to the placement prop.

App.js

Javascript




import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite CheckTreePicker Placement </h4>
      <div style={style}>
        <CheckTreePicker placement="topStart" 
          placeholder="topStart" />
        <CheckTreePicker placement="topEnd"
          placeholder="topEnd" />
        <hr />
        <CheckTreePicker placement="leftStart" 
          placeholder="leftStart" />
        <CheckTreePicker placement="leftEnd" 
          placeholder="leftEnd" />
        <hr />
        <CheckTreePicker placement="rightStart" 
          placeholder="rightStart" />
        <CheckTreePicker placement="rightEnd" 
          placeholder="rightEnd" />
        <hr />
        <CheckTreePicker placement="bottomStart" 
          placeholder="bottomStart" />
        <CheckTreePicker placement="bottomEnd" 
          placeholder="bottomEnd" />
      </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 passing values like “auto”,”autoVerticalStart”,”autoVerticalEnd”,”autoHorizontalStart”, and “autoHorizontalEnd” to the placement prop.

App.js

Javascript




import { CheckTreePicker } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
  const style = {
    textAlign: "center",
  };
  return (
    <div className="App">
      <h4> React Suite CheckTreePicker Placement </h4>
      <div style={style}>
        <CheckTreePicker placement="auto" placeholder="auto" />
        <hr />
        <CheckTreePicker
          placement="autoVerticalStart"
          placeholder="autoVerticalStart"
        />
        <CheckTreePicker
          placement="autoVerticalEnd"
          placeholder="autoVerticalEnd"
        />
        <hr />
        <CheckTreePicker
          placement="autoHorizontalStart"
          placeholder="autoHorizontalStart"
        />
        <CheckTreePicker
          placement="autoHorizontalEnd"
          placeholder="autoHorizontalEnd"
        />
        <hr />
      </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:

 

Reference: https://rsuitejs.com/components/check-tree-picker/#placement


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!