React Suite is a popular front-end UI framework that consisted of a set of React components that we can use in our react application. It is developer-friendly and supports the stable releases of all the modern browsers like Chrome, Edge, Firefox, Safari, etc. In this article, we will discuss React Suite Dropdown No Caret Variation.
A Dropdown component is used to show a large list of options to users from which users can select one or more options depending on the use case. The Dropdown no caret variation is used to hide the caret symbol which is visible by default on the right end of the dropdown. To hide the caret symbol the noCaret property of the Dropdown component is used.
React Suite Dropdown No Caret Variation Components:
- Dropdown: This component is used to show a dropdown element to the user.
React Suite Dropdown No Caret Variation Attributes/Props:
- noCaret: This is a boolean property of the Dropdown component used to hide the caret symbol of the dropdown.
- icon: This property of the Dropdown component is used to set an icon for the dropdown or its items.
Syntax:
<Dropdown noCaret title=" ... ">
...
</Dropdown>
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 Dropdown component and @rsuite/icons module for the icons using the following command:
npm install rsuite @rsuite/icons
Project Structure: After following the above steps, the project structure will look like this:
Project Structure
Let’s see some examples to understand how to use the React Suite Dropdown noCaret attribute/prop.
Example 1: Now replace the code in the App.js file with the code below. In this example, we used the noCaret property of the Dropdown component to hide the caret symbol of the dropdown.
App.js
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { Dropdown } from "rsuite"; function App() { const ddStyle = { 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" }}> neveropen </h3> <h5> React Suite Dropdown No Caret Variation </h5> </header> <p>Default Dropdown</p> <Dropdown title="Choose a topic" style={ddStyle}> <Dropdown.Item> Data Structures </Dropdown.Item> <Dropdown.Item> Algorithms </Dropdown.Item> <Dropdown.Item> Operating Systems </Dropdown.Item> </Dropdown> <p>No Caret Dropdown</p> <Dropdown noCaret title="Choose a topic" style={ddStyle}> <Dropdown.Item> Data Structures </Dropdown.Item> <Dropdown.Item> Algorithms </Dropdown.Item> <Dropdown.Item> Operating Systems </Dropdown.Item> </Dropdown> </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 noCaret property on the Dropdown along with the icon property to remove the caret symbol of the icon dropdown.
Javascript
import "rsuite/dist/rsuite.min.css"; import React from "react"; import { Dropdown } from "rsuite"; import { Search } from '@rsuite/icons'; function App() { const ddStyle = { 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" }}> neveropen </h3> <h5> React Suite Dropdown No Caret Variation </h5> </header> <p>No Caret Dropdown with Icon</p> <Dropdown noCaret icon={<Search/>} title="Choose a topic" style={ddStyle}> <Dropdown.Item> Data Structures </Dropdown.Item> <Dropdown.Item> Algorithms </Dropdown.Item> <Dropdown.Item> Operating Systems </Dropdown.Item> </Dropdown> </div> ); } export default App; |
Output:
Reference: https://rsuitejs.com/components/dropdown/#no-caret-variation
