Create a gist now

Instantly share code, notes, and snippets.

@eddywashere /App.js forked from gaearon/App.js
Last active Nov 18, 2017

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" inverse toggleable>
<NavbarToggler right onClick={this.toggle} />
<NavbarBrand href="/">reactstrap</NavbarBrand>
<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;

wrunk commented Oct 21, 2017

Maybe worth noting this example didn't work for me with latest reactstrap. I did have luck using the example from components/navbar: https://reactstrap.github.io/components/navbar/

This had issues with the nav props and other errors that caused the page to not render properly.

Working Typescript example for reactstrap-5.0.0-alpha.4

https://gist.github.com/krystofbe/47c19f41949249bb9b58af46794f1955

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