Horje
React Suite Dropdown Used with next/link

React Suite is a front-end library designed for the middle platform and back-end products. The React Suite Dropdown component allows navigating with a number of options to select from a dropdown. React Suite Dropdown Used with next/link helps to wrap the items in the dropdown into hyperlinks.

Syntax:

<Dropdown.Item as={} href="" />

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
npm install next

Project Structure: It will look like this:

 

Step to Run Application: Run the application using the following command from the project’s root directory.

npm start

Example 1: We are importing the Dropdown Component from “rsuite”, and to apply the default styles of the components we are importing “rsuite/dist/rsuite.min.css”. We are adding the <Dropdown.Item> components within the Dropdown Component, the first <Dropdown.Item> one we have kept it simple to the other components we are passing the as prop as ‘a’ and passing values the href respectively.

App.js

import { Dropdown } from "rsuite";
import "rsuite/dist/rsuite.min.css";
  
function App() {
    return (
        <div className="App">
            <h4>
                React Suite Dropdown
                Used with next/link
            </h4>
            <Dropdown title="Tutorials">
                <Dropdown.Item>
                    Data Structures
                </Dropdown.Item>
  
                <Dropdown.Item as="a" href=
                "/archive/">
                    Algorithms
                </Dropdown.Item>
  
                <Dropdown.Item as="a" href=
                "/archive/">
                    GATE
                </Dropdown.Item>
            </Dropdown>
        </div>
    );
}
  
export default App;

Output:

 

Example 2: We are importing the Dropdown Component from “rsuite” and importing Link from ‘next/Link’, and to apply the default styles of the components, we are importing “rsuite/dist/rsuite.min.css”. We are creating a Component naming it newLink , this new component takes the href and children from the <Dropdown.Item> and wraps it within <Link> and <a> tags. Now to every <Dropdown.Item> component we are passing as a prop as newLink.

App.js

import { Dropdown } from "rsuite";
import "rsuite/dist/rsuite.min.css";
import Link from "next/link";
import React from "react";
  
const newLink = (props) => {
    const {
        href, children, ...rest
    } = props;
    return (
        <Link href={href} {...rest}>
            <a href={href} style={
                {
                    width: 500,
                    color: "green"
                }}>
                {" "}
                {children}
            </a>
        </Link>
    );
};
  
function App() {
    return (
        <div className="App">
            <h4>
                React Suite Dropdown
                Used with next/link
            </h4>
            <Dropdown title="Tutorials"
                style={{ marginLeft: 80 }}>
                <Dropdown.Item as={newLink} href=
                    "/archive/">
                    Data Structures
                </Dropdown.Item>
  
                <Dropdown.Item
                    as={newLink} href=
"/archive/analysis-of-algorithms-set-1-asymptotic-analysis/?ref=ghm">
                    Algorithms
                </Dropdown.Item>
  
                <Dropdown.Item
                    as={newLink} href=
"/archive/gate-cs-notes-gq/?ref=ghm">
                    GATE
                </Dropdown.Item>
            </Dropdown>
        </div>
    );
}
  
export default App;

Output:

 

Reference: https://rsuitejs.com/components/dropdown/#used-with-code-next-link-code


 


Reffered: https://www.geeksforgeeks.org

ReactJS

Related
React.js BluePrint Breadcrumbs Component Breadcrumb Props React.js BluePrint Breadcrumbs Component Breadcrumb Props
React.js BluePrint Menu Component Dropdowns React.js BluePrint Menu Component Dropdowns
React.js Blueprint Menu Component item React.js Blueprint Menu Component item
React.js Blueprint Icon Component CSS React.js Blueprint Icon Component CSS
How to use imgur to host images in ReactsJS ? How to use imgur to host images in ReactsJS ?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje