I am working in a team project where we are using react bootstrap nav bar. We want the drop down manu to open on mouse hover. Couldn't find any satisfactory answer yet. Please help.
import { useState } from "react";
import { Dropdown } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
function App() {
const [show, setShow] = useState(false);
return (
<Dropdown
onMouseOver={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Dropdown.Toggle className="main-style" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu show={show}>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default App;
https://react-bootstrap.netlify.app/components/dropdowns/
i found that you can controll react-bootstrap Dropdown.Menu by show props
Related
I'm trying to make a dropdown menu from react-bootstrap package component, I copied exactly same component mentioned in the documentation here. The dropdown style is coming fine but the dropdown is not opening.
Here is the code:-
import { DropdownButton, Dropdown } from "react-bootstrap";
export default function Menu(){
return(
<>
<DropdownButton id="dropdown-basic-button" title="Drop">
<Dropdown.Item href="#">Action</Dropdown.Item>
<Dropdown.Item href="#">Another action</Dropdown.Item>
<Dropdown.Item href="#">Something else</Dropdown.Item>
</DropdownButton>
</>
)
}
While clicking on the Drop button, dropdown items are not opening
i install the bloomer and bulma. However i already import the dropdown. but whenever i click the dropdown menu is not showing. Can someone help me why? Thank you
This is the code:
https://codesandbox.io/s/fancy-tree-9vvf6?file=/src/App.js:34-130
There is an open issue about it on github
It means that you can start your contribution in open source and try to solve it or just use this workaround:
import { useState } from "react";
import "./styles.css";
import {
DropdownContent,
Dropdown,
DropdownItem,
DropdownTrigger,
Button,
Icon,
DropdownMenu
} from "bloomer";
import "bulma/css/bulma.min.css";
export default function App() {
const [isActive, setIsActive] = useState(false);
return (
<div className="App">
<Dropdown isActive={isActive}>
<DropdownTrigger onClick={(prev) => setIsActive(!prev)}>
<Button isOutlined aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<Icon icon="angle-down" isSize="small" />
</Button>
</DropdownTrigger>
<DropdownMenu>
<DropdownContent>
<DropdownItem href="#">First item</DropdownItem>
<DropdownItem href="#" isActive>
Second item
</DropdownItem>
<DropdownItem href="#">Third item</DropdownItem>
</DropdownContent>
</DropdownMenu>
</Dropdown>
</div>
);
}
https://codesandbox.io/s/runtime-morning-0utb9?file=/src/App.js
I already installed react-bootstrap with yarn yarn add react-bootstrap bootstrap.
I am using dropdown component but when I display it, it doesn't show like it's suppose to:
This is what I need
This is my code for that
import React from "react";
import { Dropdown } from "react-bootstrap";
// import PropTypes from "prop-types";
import "../Dropdown/index.css";
const DropdownItem = () => {
return (
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownItem;
I don't know why the dropdown is unstyled.
That's because you might not have imported the CSS in your index.html file.
You need to add something like this in your projects public/index.html file
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
OR
You can import the CSS in your App.js or index.js file like this
import 'bootstrap/dist/css/bootstrap.min.css';
You can check more about it in the react-bootstrap docs
I am customizing the Dropdown from the react-bootstrap react to create the component, but I have trouble retrieving the props.
This is my code in index.js, src/components/Dropdown/index
import React from 'react';
import {Dropdown} from 'react-bootstrap';
import '../Dropdown/index.css'
const DropdownItem = (name) => {
return(
<Dropdown>
<Dropdown.Toggle className="dropdown-button">
Selection
</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu">
<Dropdown.Item href="#/action-1">{name}</Dropdown.Item>
<Dropdown.Item href="#/action-2">{name}</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
);
}
export default DropdownItem;
The name I will render from app.js(src/app) is passed into the dropdown item like this
< DropdownItem name="Milk Tea"/>
But If I have a lot of items, how can I print them all in one dropdown group?
I can not do like this
< DropdownItem name="Milk Tea"/>
< DropdownItem name="Fruit"/>
It's will render many dropdowns not drop item
Your help is very useful
You got the child component logic wrong.
Your Child component is the whole Dropdown component as per I can see your code.
Therefore, you will have to pass down array of names as props.
Example.
import React from "react";
import { Dropdown } from "react-bootstrap";
import "../Dropdown/index.css";
const DropdownItems = ({ nameList }) => {
return (
<Dropdown>
<Dropdown.Toggle className="dropdown-button">Selection</Dropdown.Toggle>
<Dropdown.Menu className="dropdown-menu">
{nameList.map((name, index) => (
<Dropdown.Item href={`#/action-${index}`}>{name}</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
);
};
In App.js
<DropdownItems nameList={["Milk Tea","Fruit"]} />
I want to use the react Dropdownbutton to build a list, but i receive the following error :
TypeError: react_dropdown__WEBPACK_IMPORTED_MODULE_6__.Dropdown is undefined
Here is my code :
render() {
return (
<div className="Upload">
{this.renderNotes()}
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
And the import :
import { Dropdown } from "react-dropdown";
I have install it using the command : npm install react-dropdown --save
EDIT : I had to use import Dropdown from "react-dropdown";
But now the website compiles, but the list does not display...
Your are trying to import a named export. However react-dropdown exports that module as the default. import it like so
import Dropdown from 'react-dropdown'
also, make sure you import the styles for this component
import 'react-dropdown/style.css'