Migration to v2
ReactStrap vs React-Bootstrap
For version 2 of the Sell React theme, we've decided to switch to the React-Bootstrap plugin, instead of the ReactStrap. All components are rewritten accordingly.
Main reasons are faster development, broader community, and most importantly, faster Bootstrap 5 implementation. Also, in some cases, simplicity compared ReactStrap.
A lot of components have the same or similar syntax. Please follow React-Bootstrap documentation for more information.
Migration
If you would like to migrate from v1 to v2, please follow the documentations for React-Bootstrap migration and Bootstrap 5 migration.
To show the changes needed to upgrade Sell [React] from v1 to v2, please look at a few examples below.
Examples of syntax differences
1. Navbar
ReactStrap
Used in Sell [React] v1. See docs
import React, { useState } from 'react';
import {
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
Nav,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
NavbarText
} from 'reactstrap';
const Example = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<Navbar color="light" light expand="md">
<NavbarBrand href="/">reactstrap</NavbarBrand>
<NavbarToggler onClick={toggle} />
<Collapse isOpen={isOpen} navbar>
<Nav className="mr-auto" navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
</NavItem>
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav caret>
Options
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
Option 1
</DropdownItem>
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
</DropdownMenu>
</UncontrolledDropdown>
</Nav>
<NavbarText>Simple Text</NavbarText>
</Collapse>
</Navbar>
);
}
export default Example;
React Bootstrap
Used in Sell [React] v2. See docs
import React from 'react';
import {
Navbar,
Nav,
NavDropdown
} from 'react-bootstrap';
const Example = (props) => {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" 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>
</Navbar>
);
}
export default Example;
2. Dropdown
ReactStrap
Used in Sell [React] v1. See docs
import React, { useState } from 'react';
import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
const Example = (props) => {
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen(prevState => !prevState);
return (
<Dropdown isOpen={dropdownOpen} toggle={toggle}>
<DropdownToggle caret>
Dropdown
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem>Some Action</DropdownItem>
<DropdownItem text>Dropdown Item Text</DropdownItem>
<DropdownItem disabled>Action (disabled)</DropdownItem>
<DropdownItem divider />
<DropdownItem>Foo Action</DropdownItem>
<DropdownItem>Bar Action</DropdownItem>
<DropdownItem>Quo Action</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
export default Example;
React Bootstrap
Used in Sell [React] v2. See docs
import React from 'react';
import {
Dropdown
} from 'react-bootstrap';
const Example = (props) => {
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 Example;
3. Button
ReactStrap
Used in Sell [React] v1. See docs
import React from 'react';
import { Button } from 'reactstrap';
const Example = (props) => {
return (
<Button color="primary">primary</Button>
);
}
export default Example;
React Bootstrap -
Used in Sell [React] v2. See docs
import React from 'react';
import {
Button
} from 'react-bootstrap';
const Example = (props) => {
return (
<Button variant="primary">Primary</Button>{
);
}
export default Example;