Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reactstrap App.js Example for create-react-app
import React, { Component } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
Container,
Row,
Col,
Jumbotron,
Button
} from 'reactstrap';
class App extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
isOpen: false
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
});
}
render() {
return (
<div>
<Navbar color="inverse" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">Github</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
<Jumbotron>
<Container>
<Row>
<Col>
<h1>Welcome to React</h1>
<p>
<Button
tag="a"
color="success"
size="large"
href="http://reactstrap.github.io"
target="_blank"
>
View Reactstrap Docs
</Button>
</p>
</Col>
</Row>
</Container>
</Jumbotron>
</div>
);
}
}
export default App;
@hannangujar

This comment has been minimized.

Show comment
Hide comment
@hannangujar

hannangujar commented Jun 21, 2018

Working

@PeterC66

This comment has been minimized.

Show comment
Hide comment
@PeterC66

PeterC66 Aug 30, 2018

This all worked for me in reactstrap 6.4.0 out of the box, except for the NavbarToggler, which is not showing at all. Using the React console I see it rendered as a 0 * 0 pixel button at top left.

Any clues as to how to solve this? I note there are issues with the NavbarToggler on Bootstrap v4 itself (eg Bootstrap 4 navbar toggler not showing
)., but could not see how to use the solution given there within the reactstrap context.

PeterC66 commented Aug 30, 2018

This all worked for me in reactstrap 6.4.0 out of the box, except for the NavbarToggler, which is not showing at all. Using the React console I see it rendered as a 0 * 0 pixel button at top left.

Any clues as to how to solve this? I note there are issues with the NavbarToggler on Bootstrap v4 itself (eg Bootstrap 4 navbar toggler not showing
)., but could not see how to use the solution given there within the reactstrap context.

@lukevp

This comment has been minimized.

Show comment
Hide comment
@lukevp

lukevp Sep 18, 2018

@PeterC66 The navbar toggler is responsive, so it only shows when the page gets below a certain width. It seems to work fine for me in this example. Try narrowing the page and see if it shows the toggler.

lukevp commented Sep 18, 2018

@PeterC66 The navbar toggler is responsive, so it only shows when the page gets below a certain width. It seems to work fine for me in this example. Try narrowing the page and see if it shows the toggler.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment