So I am trying to make the dropdown in the below code work with javascript as I noticed that the CSS code will only trigger the dropdown after a user first clicks on the dropdown. after that, it will let the css hover code work as per normal.
So needing a Javascript way to get this drop down to work.
import React, { useState } from "react";
import {Nav, Navbar, NavDropdown, ButtonToolbar, Button } from "react-bootstrap";
import { withRouter } from "react-router";
import '../App.css';
const Header = props => {
const { location } = props;
function changeBackground(e) {
e.target.children('[data-toggle="dropdown"]').click();
}
return (
<Navbar bg="transparent" variant="dark" expand="lg">
<Navbar.Brand href="#home" className="App-logo">AdStichr</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto" activeKey={location.pathname}>
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/advertisers">Advertisers</Nav.Link>
<NavDropdown title="Publishers" id="basic-nav-dropdown" alignRight
onMouseOver={changeBackground}>
<NavDropdown.Item href="/publishers/radio">Radio Stations</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">Audio Podcasters</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">Video Podcasters</NavDropdown.Item>
</NavDropdown>
<Nav.Link href="/case-studies">Case Studies</Nav.Link>
<ButtonToolbar>
<Button href="/contact" variant="success" size="lg" className="button-round">
Contact Us
</Button>
</ButtonToolbar>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
const HeaderWithRouter = withRouter(Header);
export default HeaderWithRouter;
Opening the dropdown menu by hovering is not supported in React Bootstrap (here is an explanation: https://github.com/react-bootstrap/react-bootstrap/issues/4042).
If you'd like to achieve that you have to use the classic dropdown menu (implemented using NavItem so it works the same as the usual NavDropdown). You should be able to use the show property of Dropdown.Menu - but that doesn't seem to work perfectly either so I had to improvise a bit (hiding/removing the dropdown.menu based on state).
Here is a working example using Dropdown.Menu instead of NavDropdown (but with the same properties): https://codesandbox.io/s/falling-cookies-10joi
The main code difference is, as I explained above, using the Dropdown component instead of NavDropdown to be able to use the show property:
<Dropdown as={NavItem} alignRight onMouseLeave={closeMenu}>
<Dropdown.Toggle
id="basic-nav-dropdown"
as={NavLink}
onMouseEnter={openMenu}
>
Publishers
</Dropdown.Toggle>
{menuOpen && (
<Dropdown.Menu show={true}>
<NavDropdown.Item href="/publishers/radio">
Radio Stations
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/podcasters">
Audio Podcasters
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="/publishers/videopodcasters">
Video Podcasters
</NavDropdown.Item>
</Dropdown.Menu>
)}
</Dropdown>
We need to change our changeBackground function like this, to auto click the dropdown button on onMouseOver event:
changeBackground = (e) => {
e.target.click();
};
This will click the dropdown button and open the dropdown menu.
Please let me know if you need further information.
Related
I'm trying to add a circular profile picture to my react-bootstrap nav bar.
Similar to this:
But I'm not sure where to add the div for the circular image.
Here is my navbar code:
import { Link } from "react-router-dom";
import NavDropdown from 'react-bootstrap/NavDropdown';
import { Navbar, Nav, Container } from 'react-bootstrap';
const NavBar = (props) => {
const user = 'Petrina.C'
return (
<>
<Navbar expand="lg">
<Container style={{maxWidth:'100%'}}>
<Navbar.Brand href="#home">Voter Outreach</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto" id="navLinks">
<Nav.Link href="/">Home</Nav.Link>
<Nav.Link href="/voters">Voters</Nav.Link>
<NavDropdown title={`${user}`} id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
{props.children}
</>
);
}
export default NavBar;
Any help is appreciated!
You can put image and use class rounded-circle to make it like this:
<img src="..." class="rounded-circle" alt="...">
There are several properties available in React-Bootstrap docs.
You can simply pass the props as true if you want a property to be applied.
Example:
import Image from 'react-bootstrap/Image'
<Image src="..." roundedCircle={true}>
Or you can always use the CSS properties
import Image from 'react-bootstrap/Image'
<Image src="..." style={{ borderRadius: "50%", height: "100px", width: "100px" }} />
Total web dev noob here. Just integrated Bootstrap for the first time, and I'm using a set of Navbars gotten off this link : https://react-bootstrap.github.io/components/navbar/
I've noticed that, while the style is correct and everything looks normal, the text content of the Navbar is not filling the entire width of the Bar. picture shown below
[![enter image description here][1]][1]
Navbar File code extract
class Navsucks extends Component {
// componentDidMount() {
// }
render() {
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark" >
<Container>
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#features">Features</Nav.Link>
<Nav.Link href="#pricing">Pricing</Nav.Link>
<NavDropdown title="Dropdown" id="collasible-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="#deets">More deets</Nav.Link>
<Nav.Link eventKey={2} href="#memes">
Dank memes
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
}
App.js code extract
class App extends Component {
state = { posty: []}
componentDidMount() {
}
render() {
return (
<div className="App">
<Navsucks> </Navsucks>
<header className="App-header">
<Texts> asdasd </Texts>
</header>
</div>
);
}
}
export default App;
I really just want the left and right halves of the text to be hugging the screen edges. Is this possible? Any help is much appreciated!
Thanks!
I am making a React App. I am using react-bootstrap to make it.But while trying to show content on different nav items by using the Tab.Content and Tab.Pane , the value shows in the default nav correctly on page refresh but if I go to the other nav item , the content does not show up and the content of the default value also gets blank.If i again refresh the page the value on the default nav item shows up and then the same thing happen. Please help me.
Error lies in between line 22 to line 29.
import React, { useState } from 'react';
import { Tab, Nav } from 'react-bootstrap'
import Conversations from './Conversations'
import Contacts from './Contacts'
const Sidebar = (props) => {
const [activeKey, setActiveKey] = useState('conversations')
return (
<div style={{ width: '250px' }} className='d-flex flex-column' >
<Tab.Container activeKey={activeKey} onSelect={() => setActiveKey(null)} >
<Nav variant='tabs' className='justify-content-center mt-1' >
<Nav.Item>
<Nav.Link eventKey='conversations' >Conversations</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey='contacts' >Contacts</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content >
<Tab.Pane eventKey='conversations' >
<Conversations />
</Tab.Pane>
<Tab.Pane eventKey='contacts' >
<Contacts />
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>
)
}
Based on https://react-bootstrap.github.io/components/tabs/#tabs-controlled , I suspect that:
onSelect={() => setActiveKey(null)}
should be:
onSelect={(key) => setActiveKey(key)}
Edit: I've tried this change out locally now and it appears to work.
I need to do this transformation because the dropdown from Material UI looks bad.
Beside of that, the code is working fine. It is a dropdown with multiple choices, it loads a list of strings and their corresponding images and when they are filtered by that category/categories are shown in the table.
This is the working code with Material UI:
import {
Select,
MenuItem,
FormControl,
InputLabel,
} from '#material-ui/core';
const platforms = ['a', 'b', 'c', 'd'];
<FormControl className='searchPlatform'>
<InputLabel id='platforLabel'>Platform</InputLabel>
<Select
labelId='platforLabel'
id='platforLabel'
value={this.props.platformFilter}
renderValue={this.getSelectedPlatformFilter}
onChange={this.handleChangePlatform}
multiple
>
{platforms.map((platform) => (
<MenuItem key={platform} value={platform}>
<div>
<img
src={this.showicon(platform)}
alt=''
height={17}
width={17}
/>
{platform}
</div>
</MenuItem>
))}
</Select>
</FormControl>
And the next one is what I've tried with Bootstrap. I don't know how to trigger the dropdown on onChange. I've tried to put onClick on Dropdown.Item in order to call the same trigger as in onChange from Dropdown.Menu
import { Dropdown } from 'react-bootstrap';
<Dropdown>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu
value={this.props.platformFilter}
renderValue={this.getSelectedPlatformFilter}
onChange={this.handleChangePlatform}
>
{platforms.map((platform) => (
<Dropdown.Item
eventKey={platform}
value={platform}
onClick={this.handleChangePlatform}
>
<div>
<img
src={this.showicon(platform)}
alt=''
height={17}
width={17}
/>
{platform}
</div>
</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
Try onSelect prop on <Dropdown> component, as it's a callback fired when a menu item is selected.
(eventKey: any, event: Object) => any
It would be something like:
<Dropdown onSelect={handleChangePlatform}>
<Dropdown.Toggle variant='success' id='dropdown-basic'>
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
// ... rest of code
</Dropdown.Menu>
</Dropdown>
I have a navbar, where I want to render different components on each dropdown navitem click. I am not sure how can I derive the event Key from each navitem and use it. Currenlty, onSelect is for the whole nav.
Please be patient with me, I am just learning React.
<Navbar collapseOnSelect expand="lg" variant="light" bg="light">
<Nav onSelect={key=>{this._handleSelect(key)}}>
<NavDropdown eventKey={C.CONTEXT_DFMP} title="DFMP">
<NavDropdown.Item eventKey={C.CONTEXT_DFMP}>DFMP (District )</NavDropdown.Item>
<NavDropdown.Item eventKey={C.CONTEXT_FMU}>FMU (Forest )</NavDropdown.Item>
<NavDropdown.Item eventKey={C.CONTEXT_SILVTREAT_PARAMS}>Silviculture </NavDropdown.Item>
</NavDropdown>
<NavDropdown eventKey={C.CONTEXT_SFMP} title="SFMP">
<NavDropdown.Item eventKey={C.CONTEXT_SFMP}>SFMP</NavDropdown.Item>
</NavDropdown>
</Nav>
I am not sure that I get you right, but if you want to render a new page on the dropdown click ( or a better word is to navigate), you better use react-router, and in Navbar component, you can use NavLink from react-router-dom.
Example:
<Router>
<Route exact path={"/District"} component={District} />
<Route exact path={"/Forest"} component={Forest} />
</Router>
import { NavLink } from "react-router-dom";
<NavDropdown title="DFMP" id="basic-nav-dropdown">
<NavLink className="nav-link" to="/District">
DFMP (District )
</NavLink>
<NavLink className="nav-link" to="/Forest">
FMU (Forest )
</NavLink>
</NavDropdown>
More information on react-router here.
If you just want to derive the event Key from each nav item, you should use onSelect for each Nav.item
<NavDropdown.Item
eventKey="info"
onSelect={(event, eventKey) => console.log(event, eventKey)}
>
DFMP (District)
</NavDropdown.Item>
Here is similar question.
EventKeys in NavDropdown in React-Bootstrap
Try to add an onSelect prop to the NavDropdown.Item component
<NavDropdown.Item onSelect={() => this._handleSelect(C.CONTEXT_DFMP)}>DFMP (District)</NavDropdown.Item>