React Suite DateRangePicker Size

React Suite is a front-end UI library built on top of React that lets us many pre-built components to our react application. It is a developer-friendly library and is a great base for building scalable and beautiful websites and applications. In this article, we will be seeing React Suite DateRangePicker Size.

The DateRangePicker component is used to take the user’s input of the date range. The size property of the DateRangePicker component is used to control the size of the component. The DateRangePicker component comes in four sizes: large, medium, small and extra-small.

React Suite DateRangePicker Size Components:

• DateRangePicker: The DateRangePicker component is used to take the user’s input of the date range.

React Suite DateRangePicker Size Attributes/Props:

• size: This property is used on the DateRangePicker component to specify its size. It takes four values: “lg”, “md”, “sm” and “xs”.

Syntax:

<DateRangePicker size="lg" />

Creating The React Application And Installing React Suite in the Project:

Step 1: Create the React application using the npx command:

npx create-react-app foldername

Step 2: After creating the project folder, move to it using the cd command:

cd foldername

Step 3: After creating the ReactJS application, Install the rsuite module so that we can use the DateRangePicker component using the following command:

npm install rsuite

Project Structure: After following the above steps, the project structure will look like this:

Project Structure

Let’s see some examples to see how the React Suite DateRangePicker size attribute/prop work.

Example 1: Now replace the code in the App.js file with the code below. In this example, we used the size property of the DateRangePicker component to show its large and medium sizes.

App.js

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DateRangePicker } from "rsuite";

function App() {

    const pickerStyle = {
        marginTop: "10px",
        marginBottom: "25px"
    };

    return (

        <div className="App" style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center",
                display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite DateRangePicker Size</h5>
            </header>

            <DateRangePicker size="lg"
                placeholder="Large Sized DateRangePicker"
                style={pickerStyle} />
            <DateRangePicker size="md"
                placeholder="Medium Sized DateRangePicker"
                style={pickerStyle} />
        </div>
    );
}

export default App;

Run the Application: Run your app using the following command from the root directory of the project.

npm start

Output: Go to http://localhost:3000/ in your browser to see the output.

Example 2: In this example, we used the size property of the DateRangePicker component to show its remaining two sizes i.e small and extra-small.

App.js

import "rsuite/dist/rsuite.min.css";
import React from "react";
import { DateRangePicker } from "rsuite";

function App() {
    const pickerStyle = {
        marginTop: "10px",
        marginBottom: "25px"
    };

    return (
        <div className="App" style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "column"
        }}>
            <header style={{
                textAlign: "center",
                display: "block",
                marginBottom: "30px"
            }}>
                <h3 style={{ color: "green" }}>
                    GeeksforGeeks
                </h3>
                <h5>React Suite DateRangePicker Size</h5>
            </header>

            <DateRangePicker size="sm"
                placeholder="Small Sized DateRangePicker"
                style={pickerStyle} />
            <DateRangePicker size="xs"
                placeholder="Extra-Small Sized DateRangePicker"
                style={pickerStyle} />
        </div>
    );
}

export default App;

Output:

Reference: https://rsuitejs.com/components/date-range-picker/#size