+
+ I am a primary alert and I can be dismissed without animating!
+
- );
- }
+ );
}
export function UncontrolledAlertFadelessExample() {
diff --git a/docs/lib/examples/Badge.js b/docs/lib/examples/Badge.js
index 42291144f..b288c8e86 100644
--- a/docs/lib/examples/Badge.js
+++ b/docs/lib/examples/Badge.js
@@ -1,17 +1,17 @@
import React from 'react';
import { Badge } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- Heading
- Heading
- Heading
- Heading
- Heading
- Heading
-
- );
- }
+const Example = (props) => {
+ return (
+ Heading New
- Heading New
- Heading New
- Heading New
- Heading New
- Heading New
-
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+ Heading
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/BadgeButton.js b/docs/lib/examples/BadgeButton.js
index acb221765..c2df1dda2 100644
--- a/docs/lib/examples/BadgeButton.js
+++ b/docs/lib/examples/BadgeButton.js
@@ -1,14 +1,14 @@
import React from 'react';
import { Badge, Button } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
- Heading New
+ Heading New
+ Heading New
+ Heading New
+ Heading New
+ Heading New
+
-
-
- );
- }
+const Example = (props) => {
+ return (
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/BadgeLinks.js b/docs/lib/examples/BadgeLinks.js
index 0c2f85af3..15078d34a 100644
--- a/docs/lib/examples/BadgeLinks.js
+++ b/docs/lib/examples/BadgeLinks.js
@@ -1,19 +1,19 @@
import React from 'react';
import { Badge } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
- );
- }
+const Example = (props) => {
+ return (
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/BadgePills.js b/docs/lib/examples/BadgePills.js
index ed559cddd..583374f60 100644
--- a/docs/lib/examples/BadgePills.js
+++ b/docs/lib/examples/BadgePills.js
@@ -1,19 +1,19 @@
import React from 'react';
import { Badge } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
- );
- }
+const Example = (props) => {
+ return (
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/BadgeVariations.js b/docs/lib/examples/BadgeVariations.js
index 313a06be2..58c618c25 100644
--- a/docs/lib/examples/BadgeVariations.js
+++ b/docs/lib/examples/BadgeVariations.js
@@ -1,19 +1,20 @@
import React from 'react';
import { Badge } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- Primary
- Secondary
- Success
- Danger
- Warning
- Info
- Light
- Dark
-
- );
- }
+const Example = (props) => {
+ return (
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+ );
+
}
+
+export default Example;
diff --git a/docs/lib/examples/Button.js b/docs/lib/examples/Button.js
index 178012d9e..62f0abcf6 100644
--- a/docs/lib/examples/Button.js
+++ b/docs/lib/examples/Button.js
@@ -1,18 +1,18 @@
import React from 'react';
import { Button } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- {' '}
- {' '}
- {' '}
- {' '}
- {' '}
- {' '}
-
-
- );
- }
+const Example = (props) => {
+ return (
+
+ {' '}
+ {' '}
+ {' '}
+ {' '}
+ {' '}
+ {' '}
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/ButtonDropdown.js b/docs/lib/examples/ButtonDropdown.js
index 86da15bdd..5e2bbd6f6 100644
--- a/docs/lib/examples/ButtonDropdown.js
+++ b/docs/lib/examples/ButtonDropdown.js
@@ -1,36 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [dropdownOpen, setOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: false
- };
- }
+ const toggle = () => setOpen(!dropdownOpen);
- toggle() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen
- });
- }
-
- render() {
- return (
-
- {' '}
- {' '}
- {' '}
- {' '}
- {' '}
-
-
- );
- }
+const Example = (props) => {
+ return (
+
+ {' '}
+ {' '}
+ {' '}
+ {' '}
+ {' '}
+
+
+ );
+
}
+
+export default Example;
diff --git a/docs/lib/examples/ButtonStateful.js b/docs/lib/examples/ButtonStateful.js
index 088226710..6516d507b 100644
--- a/docs/lib/examples/ButtonStateful.js
+++ b/docs/lib/examples/ButtonStateful.js
@@ -1,51 +1,38 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
import { Button, ButtonGroup } from 'reactstrap';
-class Example extends Component {
- constructor (props) {
- super(props);
+const Example = (props) => {
+ const [cSelected, setCSelected] = useState([]);
+ const [rSelected, setRSelected] = useState(null);
- this.state = { cSelected: [] };
-
- this.onRadioBtnClick = this.onRadioBtnClick.bind(this);
- this.onCheckboxBtnClick = this.onCheckboxBtnClick.bind(this);
- }
-
- onRadioBtnClick(rSelected) {
- this.setState({ rSelected });
- }
-
- onCheckboxBtnClick(selected) {
- const index = this.state.cSelected.indexOf(selected);
+ const onCheckboxBtnClick = (selected) => {
+ const index = cSelected.indexOf(selected);
if (index < 0) {
- this.state.cSelected.push(selected);
+ cSelected.push(selected);
} else {
- this.state.cSelected.splice(index, 1);
+ cSelected.splice(index, 1);
}
- this.setState({ cSelected: [...this.state.cSelected] });
- }
-
- render() {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
- );
+ setCSelected([...cSelected]);
}
+ return (
+ Radio Buttons
-Selected: {this.state.rSelected}
- -Checkbox Buttons
-Selected: {JSON.stringify(this.state.cSelected)}
-
+
+
+
+
+
+
+
+
+
+
+
+ );
}
export default Example;
\ No newline at end of file
diff --git a/docs/lib/examples/ButtonToolbar.js b/docs/lib/examples/ButtonToolbar.js
index 30c5c9172..0b5e78f44 100644
--- a/docs/lib/examples/ButtonToolbar.js
+++ b/docs/lib/examples/ButtonToolbar.js
@@ -1,25 +1,25 @@
import React from 'react';
import { Button, ButtonGroup, ButtonToolbar } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
- Radio Buttons
+Selected: {rSelected}
+ +Checkbox Buttons
+Selected: {JSON.stringify(cSelected)}
+
-
-
-
-
+
+
+
+
+
+ );
}
export default Example;
diff --git a/docs/lib/examples/Collapse.js b/docs/lib/examples/Collapse.js
index 36470bd02..86bb818a6 100644
--- a/docs/lib/examples/Collapse.js
+++ b/docs/lib/examples/Collapse.js
@@ -1,34 +1,26 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
-class Example extends Component {
- constructor(props) {
- super(props);
- this.toggle = this.toggle.bind(this);
- this.state = { collapse: false };
- }
+const Example = (props) => {
+ const [collapse, setCollapse] = useState(false);
- toggle() {
- this.setState(state => ({ collapse: !state.collapse }));
- }
+ const toggle = () => setCollapse(!collapse);
- render() {
- return (
-
-
-
-
-
- Anim pariatur cliche reprehenderit,
- enim eiusmod high life accusamus terry richardson ad squid. Nihil
- anim keffiyeh helvetica, craft beer labore wes anderson cred
- nesciunt sapiente ea proident.
-
-
-
-
- );
- }
+ return (
+
+
+
+
+
+ Anim pariatur cliche reprehenderit,
+ enim eiusmod high life accusamus terry richardson ad squid. Nihil
+ anim keffiyeh helvetica, craft beer labore wes anderson cred
+ nesciunt sapiente ea proident.
+
+
+
+
+ );
}
export default Example;
diff --git a/docs/lib/examples/CollapseEvents.js b/docs/lib/examples/CollapseEvents.js
index a18b00dd7..19b4a55d2 100644
--- a/docs/lib/examples/CollapseEvents.js
+++ b/docs/lib/examples/CollapseEvents.js
@@ -1,61 +1,42 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';
-class Example extends Component {
- constructor(props) {
- super(props);
- this.onEntering = this.onEntering.bind(this);
- this.onEntered = this.onEntered.bind(this);
- this.onExiting = this.onExiting.bind(this);
- this.onExited = this.onExited.bind(this);
- this.toggle = this.toggle.bind(this);
- this.state = { collapse: false, status: 'Closed' };
- }
-
- onEntering() {
- this.setState({ status: 'Opening...' });
- }
-
- onEntered() {
- this.setState({ status: 'Opened' });
- }
-
- onExiting() {
- this.setState({ status: 'Closing...' });
- }
-
- onExited() {
- this.setState({ status: 'Closed' });
- }
-
- toggle() {
- this.setState(state => ({ collapse: !state.collapse }));
- }
-
- render() {
- return (
-
-
-
-
-
- Anim pariatur cliche reprehenderit,
- enim eiusmod high life accusamus terry richardson ad squid. Nihil
- anim keffiyeh helvetica, craft beer labore wes anderson cred
- nesciunt sapiente ea proident.
-
-
-
-
- );
- }
+const Example = (props) => {
+ const [collapse, setCollapse] = useState(false);
+ const [status, setStatus] = useState('Closed');
+
+ const onEntering = () => setStatus('Opening...');
+
+ const onEntered = () => setStatus('Opened');
+
+ const onExiting = () => setStatus('Closing...');
+
+ const onExited = () => setStatus('Closed');
+
+ const toggle = () => setCollapse(!collapse);
+
+ return (
+ Current state: {this.state.status}
-
+
+
+
+
+ Anim pariatur cliche reprehenderit,
+ enim eiusmod high life accusamus terry richardson ad squid. Nihil
+ anim keffiyeh helvetica, craft beer labore wes anderson cred
+ nesciunt sapiente ea proident.
+
+
+
+
+ );
}
export default Example;
diff --git a/docs/lib/examples/CustomControls.js b/docs/lib/examples/CustomControls.js
index 39a8eb3d4..2789865a3 100644
--- a/docs/lib/examples/CustomControls.js
+++ b/docs/lib/examples/CustomControls.js
@@ -1,105 +1,105 @@
import React from 'react';
import { CustomInput, Form, FormGroup, Label } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/Fade.js b/docs/lib/examples/Fade.js
index 162de7828..52776a6f6 100644
--- a/docs/lib/examples/Fade.js
+++ b/docs/lib/examples/Fade.js
@@ -1,27 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Fade } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
- this.state = { fadeIn: true };
- this.toggle = this.toggle.bind(this);
- }
+const Example = (props) => {
+ const [fadeIn, setFadeIn] = useState(true);
- render() {
- return (
- Current state: {status}
+
-
-
- This content will fade in and out as the button is pressed
-
-
- );
- }
+ const toggle = () => setFadeIn(!fadeIn);
- toggle() {
- this.setState({
- fadeIn: !this.state.fadeIn
- });
- }
-};
+ return (
+
+
+
+ This content will fade in and out as the button is pressed
+
+
+ );
+}
+
+export default Example;
diff --git a/docs/lib/examples/Form.js b/docs/lib/examples/Form.js
index 4fae646f4..4341d8374 100644
--- a/docs/lib/examples/Form.js
+++ b/docs/lib/examples/Form.js
@@ -1,79 +1,79 @@
import React from 'react';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/FormFeedback.js b/docs/lib/examples/FormFeedback.js
index 9d5b3f37e..e5098d09e 100644
--- a/docs/lib/examples/FormFeedback.js
+++ b/docs/lib/examples/FormFeedback.js
@@ -1,47 +1,47 @@
import React from 'react';
import { Form, FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/FormGrid.js b/docs/lib/examples/FormGrid.js
index 63739fdf0..db58befde 100644
--- a/docs/lib/examples/FormGrid.js
+++ b/docs/lib/examples/FormGrid.js
@@ -1,90 +1,90 @@
import React from 'react';
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/FormGridFormRow.js b/docs/lib/examples/FormGridFormRow.js
index 89be55e02..5bc790ea4 100644
--- a/docs/lib/examples/FormGridFormRow.js
+++ b/docs/lib/examples/FormGridFormRow.js
@@ -1,58 +1,58 @@
import React from 'react';
-import { Col, Row, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/FormInline.js b/docs/lib/examples/FormInline.js
index f89f560e0..13853e73a 100644
--- a/docs/lib/examples/FormInline.js
+++ b/docs/lib/examples/FormInline.js
@@ -1,20 +1,20 @@
import React from 'react';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/InlineCheckboxes.js b/docs/lib/examples/InlineCheckboxes.js
index 719f64d97..771c6a289 100644
--- a/docs/lib/examples/InlineCheckboxes.js
+++ b/docs/lib/examples/InlineCheckboxes.js
@@ -1,21 +1,22 @@
import React from 'react';
import { Form, FormGroup, Label, Input } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
+
\ No newline at end of file
diff --git a/docs/lib/examples/InputGridSizing.js b/docs/lib/examples/InputGridSizing.js
index 59044228c..60b4d3bb3 100644
--- a/docs/lib/examples/InputGridSizing.js
+++ b/docs/lib/examples/InputGridSizing.js
@@ -1,23 +1,23 @@
import React from 'react';
import { Col, Form, FormGroup, Label, Input } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
- );
- }
+const Example = (props) => {
+ return (
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/InputGroupButton.js b/docs/lib/examples/InputGroupButton.js
index ef3eeb6d7..2706f2355 100644
--- a/docs/lib/examples/InputGroupButton.js
+++ b/docs/lib/examples/InputGroupButton.js
@@ -1,82 +1,64 @@
-import React from 'react';
+import React, { useState } from 'react';
import {
InputGroup,
InputGroupAddon,
InputGroupButtonDropdown,
- InputGroupDropdown,
Input,
Button,
- Dropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [splitButtonOpen, setSplitButtonOpen] = useState(false);
- this.toggleDropDown = this.toggleDropDown.bind(this);
- this.toggleSplit = this.toggleSplit.bind(this);
- this.state = {
- dropdownOpen: false,
- splitButtonOpen: false
- };
- }
+ const toggleDropDown = () => setDropdownOpen(!dropdownOpen);
- toggleDropDown() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen
- });
- }
+ const toggleSplit = () => setSplitButtonOpen(!splitButtonOpen);
- toggleSplit() {
- this.setState({
- splitButtonOpen: !this.state.splitButtonOpen
- });
- }
+ return (
+
+
+
+
+
+
+
+
+ Button Dropdown
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+
+
+
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+
+
+ );
+}
- render() {
- return (
- +
+
-
-
-
-
-
-
-
- Button Dropdown
-
-
- Header
- Action
- Another Action
- Another Action
-
-
-
-
-
-
-
-
- Header
- Action
- Another Action
- Another Action
-
-
-
-
-
- );
- }
-}
+export default Example;
diff --git a/docs/lib/examples/InputGroupButtonDropdown.js b/docs/lib/examples/InputGroupButtonDropdown.js
index 87f0a31d9..51edede82 100644
--- a/docs/lib/examples/InputGroupButtonDropdown.js
+++ b/docs/lib/examples/InputGroupButtonDropdown.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { InputGroupButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
@@ -6,40 +6,27 @@ const propTypes = {
addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
};
-class Example extends React.Component {
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: false
- };
- }
-
- toggle() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen
- });
- }
-
- render() {
- const { addonType } = this.props;
-
- return (
- -
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
-
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
-
-
- );
- }
+const Example = (props) => {
+ return (
+ Anchors
-Be sure to not use the standard .btn classes here.
Buttons
-
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/ListGroupBadge.js b/docs/lib/examples/ListGroupBadge.js
index 64b6bc999..9cae89ffd 100644
--- a/docs/lib/examples/ListGroupBadge.js
+++ b/docs/lib/examples/ListGroupBadge.js
@@ -1,14 +1,14 @@
import React from 'react';
import { ListGroup, ListGroupItem, Badge } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
- Anchors
+Be sure to not use the standard .btn classes here.
Buttons
+
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalBackdrop.js b/docs/lib/examples/ModalBackdrop.js
index 2fd82e953..4131c4d0d 100644
--- a/docs/lib/examples/ModalBackdrop.js
+++ b/docs/lib/examples/ModalBackdrop.js
@@ -1,62 +1,52 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false,
- backdrop: true
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+ const [modal, setModal] = useState(false);
+ const [backdrop, setBackdrop] = useState(true);
- this.toggle = this.toggle.bind(this);
- this.changeBackdrop = this.changeBackdrop.bind(this);
- }
-
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- changeBackdrop(e) {
+ const changeBackdrop = e => {
let value = e.target.value;
if (value !== 'static') {
value = JSON.parse(value);
}
- this.setState({ backdrop: value });
+ setBackdrop(value);
}
- render() {
- return (
-
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalCustomCloseButton.js b/docs/lib/examples/ModalCustomCloseButton.js
index 73daecb5f..6b3fdd89c 100644
--- a/docs/lib/examples/ModalCustomCloseButton.js
+++ b/docs/lib/examples/ModalCustomCloseButton.js
@@ -1,47 +1,39 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- }
+ const [modal, setModal] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- render() {
- const closeBtn = ;
+ const closeBtn = ;
- return (
-
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
- dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
- ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
- fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
- mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+ dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
+ ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
+ fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+ mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+);
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalCustomCloseIcon.js b/docs/lib/examples/ModalCustomCloseIcon.js
index 10cf3054d..e067845e3 100644
--- a/docs/lib/examples/ModalCustomCloseIcon.js
+++ b/docs/lib/examples/ModalCustomCloseIcon.js
@@ -1,41 +1,33 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- }
+ const [modal, setModal] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- render() {
- return (
-
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalCustomTimeout.js b/docs/lib/examples/ModalCustomTimeout.js
index bfc3ec53c..3e7a1602f 100644
--- a/docs/lib/examples/ModalCustomTimeout.js
+++ b/docs/lib/examples/ModalCustomTimeout.js
@@ -1,42 +1,34 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- }
+ const [modal, setModal] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- render() {
- return (
-
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalDestructuring.js b/docs/lib/examples/ModalDestructuring.js
index 12ab199d5..3ef5ebc1e 100644
--- a/docs/lib/examples/ModalDestructuring.js
+++ b/docs/lib/examples/ModalDestructuring.js
@@ -1,58 +1,48 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false,
- unmountOnClose: true
- };
-
- this.toggle = this.toggle.bind(this);
- this.changeUnmountOnClose = this.changeUnmountOnClose.bind(this);
- }
-
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
-
- changeUnmountOnClose(e) {
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+ const [unmountOnClose, setUnmountOnClose] = useState(true);
+
+ const toggle = () => setModal(!modal);
+ const changeUnmountOnClose = e => {
let value = e.target.value;
- this.setState({ unmountOnClose: JSON.parse(value) });
- }
-
- render() {
- return (
-
-
-
- Modal title
-
-
-
-
- {' '}
-
-
-
-
- );
+ setUnmountOnClose(JSON.parse(value));
}
+
+ return (
+
+
+
+ Modal title
+
+
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalExternal.js b/docs/lib/examples/ModalExternal.js
index 7c899f585..e09c12240 100644
--- a/docs/lib/examples/ModalExternal.js
+++ b/docs/lib/examples/ModalExternal.js
@@ -1,43 +1,35 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- }
+ const [modal, setModal] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- render() {
- const externalCloseBtn = ;
- return (
-
-
-
- Modal title
-
- Look at the top right of the page/viewport!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
-
- {' '}
-
-
-
-
- );
- }
+ const externalCloseBtn = ;
+ return (
+ - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -
+
+
+ Modal title
+
+ Look at the top right of the page/viewport!
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalFadeless.js b/docs/lib/examples/ModalFadeless.js
index 31b559acc..7bc9cc288 100644
--- a/docs/lib/examples/ModalFadeless.js
+++ b/docs/lib/examples/ModalFadeless.js
@@ -1,41 +1,33 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- }
+ const [modal, setModal] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
- }
+ const toggle = () => setModal(!modal);
- render() {
- return (
- + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/ModalFocusAfterClose.js b/docs/lib/examples/ModalFocusAfterClose.js
index 9f37f4be8..b96b0d6b1 100644
--- a/docs/lib/examples/ModalFocusAfterClose.js
+++ b/docs/lib/examples/ModalFocusAfterClose.js
@@ -1,51 +1,39 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalBody, ModalFooter, Label, Input, FormGroup, Form } from 'reactstrap';
-class ModalFocusAfterClose extends React.Component {
- constructor() {
- super();
- this.state = {
- open: false,
- focusAfterClose: true
- };
- this.toggle = this.toggle.bind(this);
- this.handleSelectChange = this.handleSelectChange.bind(this);
- }
-
- toggle() {
- this.setState(({ open }) => ({ open: !open }));
- }
+const ModalFocusAfterClose = (props) => {
+ const [open, setOpen] = useState(false);
+ const [focusAfterClose, setFocusAfterClose] = useState(true);
- handleSelectChange({target: { value }}) {
- this.setState({ focusAfterClose: JSON.parse(value) });
+ const toggle = () => setOpen(!open);
+ const handleSelectChange = ({target: { value }}) => {
+ setFocusAfterClose(JSON.parse(value));
}
- render() {
- return (
-
-
-
-
- Observe the "Open" button. It will be focused after close when "returnFocusAfterClose" is true and will not be focused if "returnFocusAfterClose" is false.
-
-
-
-
-
-
- )
- }
+ return (
+
+
+
+
+ Observe the "Open" button. It will be focused after close when "returnFocusAfterClose" is true and will not be focused if "returnFocusAfterClose" is false.
+
+
+
+
+
+
+ )
}
export default ModalFocusAfterClose;
diff --git a/docs/lib/examples/ModalNested.js b/docs/lib/examples/ModalNested.js
index e3b57752a..baf045dab 100644
--- a/docs/lib/examples/ModalNested.js
+++ b/docs/lib/examples/ModalNested.js
@@ -1,69 +1,53 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-class ModalExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- modal: false,
- nestedModal: false,
- closeAll: false
- };
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
- this.toggle = this.toggle.bind(this);
- this.toggleNested = this.toggleNested.bind(this);
- this.toggleAll = this.toggleAll.bind(this);
- }
+ const [modal, setModal] = useState(false);
+ const [nestedModal, setNestedModal] = useState(false);
+ const [closeAll, setCloseAll] = useState(false);
- toggle() {
- this.setState(prevState => ({
- modal: !prevState.modal
- }));
+ const toggle = () => setModal(!modal);
+ const toggleNested = () => {
+ setNestedModal(!nestedModal);
+ setCloseAll(false);
}
-
- toggleNested() {
- this.setState({
- nestedModal: !this.state.nestedModal,
- closeAll: false
- });
+ const toggleAll = () => {
+ setNestedModal(!nestedModal);
+ setCloseAll(true);
}
- toggleAll() {
- this.setState({
- nestedModal: !this.state.nestedModal,
- closeAll: true
- });
- }
-
- render() {
- return (
-
-
-
- Modal title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
- -
- Nested Modal title
- Stuff and things
-
- {' '}
-
-
-
-
-
- {' '}
-
-
-
-
- );
- }
+ return (
+ - -
+
+
+ Modal title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+ +
+ Nested Modal title
+ Stuff and things
+
+ {' '}
+
+
+
+
+
+ {' '}
+
+
+
+
+ );
}
export default ModalExample;
diff --git a/docs/lib/examples/NavPills.js b/docs/lib/examples/NavPills.js
index 2f04c4b54..c8c48015b 100644
--- a/docs/lib/examples/NavPills.js
+++ b/docs/lib/examples/NavPills.js
@@ -1,52 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: false
- };
- }
+ const toggle = () => setDropdownOpen(!dropdownOpen);
- toggle() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen
- });
- }
-
- render() {
- return (
- + +
-
-
- );
- }
+ return (
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/NavTabs.js b/docs/lib/examples/NavTabs.js
index 04c62ddde..4962adcdd 100644
--- a/docs/lib/examples/NavTabs.js
+++ b/docs/lib/examples/NavTabs.js
@@ -1,52 +1,41 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- dropdownOpen: false
- };
- }
+ const toggle = () => setDropdownOpen(!dropdownOpen);
- toggle() {
- this.setState({
- dropdownOpen: !this.state.dropdownOpen
- });
- }
-
- render() {
- return (
-
-
-
- );
- }
+ return (
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/NavVertical.js b/docs/lib/examples/NavVertical.js
index 310d8092a..b6f4b0fbb 100644
--- a/docs/lib/examples/NavVertical.js
+++ b/docs/lib/examples/NavVertical.js
@@ -1,31 +1,31 @@
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
-
-
- );
- }
+const Example = (props) => {
+ return (
+ List Based
- --
Link based
- -
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/Navbar.js b/docs/lib/examples/Navbar.js
index 0b8c4a711..278358ecc 100644
--- a/docs/lib/examples/Navbar.js
+++ b/docs/lib/examples/Navbar.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import {
Collapse,
Navbar,
@@ -12,55 +12,46 @@ import {
DropdownMenu,
DropdownItem } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [isOpen, setIsOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- isOpen: false
- };
- }
- toggle() {
- this.setState({
- isOpen: !this.state.isOpen
- });
- }
- render() {
- return (
- List Based
+ ++
Link based
+ +
-
- reactstrap
-
-
-
-
-
- );
- }
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+
+
+ reactstrap
+
+
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/NavbarToggler.js b/docs/lib/examples/NavbarToggler.js
index ad226741c..554a2bf90 100644
--- a/docs/lib/examples/NavbarToggler.js
+++ b/docs/lib/examples/NavbarToggler.js
@@ -1,39 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [collapsed, setCollapsed] = useState(true);
- this.toggleNavbar = this.toggleNavbar.bind(this);
- this.state = {
- collapsed: true
- };
- }
+ const toggleNavbar = () => setCollapsed(!collapsed);
- toggleNavbar() {
- this.setState({
- collapsed: !this.state.collapsed
- });
- }
- render() {
- return (
-
-
- reactstrap
-
-
-
-
-
- );
- }
+ return (
+
+
+ reactstrap
+
+
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/Navs.js b/docs/lib/examples/Navs.js
index d44589baf..a89c527c7 100644
--- a/docs/lib/examples/Navs.js
+++ b/docs/lib/examples/Navs.js
@@ -1,31 +1,31 @@
import React from 'react';
import { Nav, NavItem, NavLink } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
-
-
- );
- }
+const Example = (props) => {
+ return (
+ List Based
- --
Link Based
- -
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/Pagination.js b/docs/lib/examples/Pagination.js
index a2f413763..6b75c2b98 100644
--- a/docs/lib/examples/Pagination.js
+++ b/docs/lib/examples/Pagination.js
@@ -1,48 +1,48 @@
import React from 'react';
import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
- List Based
+ ++
Link Based
+ +
-
-
- Popover Title
- Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
-
-
- );
- }
+ return (
+
+
+
+ Popover Title
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/PopoverFocus.js b/docs/lib/examples/PopoverFocus.js
index a03d89350..31a1082f8 100644
--- a/docs/lib/examples/PopoverFocus.js
+++ b/docs/lib/examples/PopoverFocus.js
@@ -2,35 +2,35 @@
import React from 'react';
import { Button, UncontrolledPopover, PopoverHeader, PopoverBody } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
-
- {' '}
-
- {' '}
-
-
- Focus Trigger
- Focusing on the trigging element makes this popover appear. Blurring (clicking away) makes it disappear. You cannot select this text as the popover will disappear when you try.
-
-
- Click Trigger
- Clicking on the triggering element makes this popover appear. Clicking on it again will make it disappear. You can select this text, but clicking away (somewhere other than the triggering element) will not dismiss this popover.
-
-
- Legacy Trigger
-
- Legacy is a reactstrap special trigger value (outside of bootstrap's spec/standard). Before reactstrap correctly supported click and focus, it had a hybrid which was very useful and has been brought back as trigger="legacy". One advantage of the legacy trigger is that it allows the popover text to be selected while also closing when clicking outside the triggering element and popover itself.
-
-
- );
- }
+const Example = (props) => {
+ return (
+
+
+ {' '}
+
+ {' '}
+
+
+ Focus Trigger
+ Focusing on the trigging element makes this popover appear. Blurring (clicking away) makes it disappear. You cannot select this text as the popover will disappear when you try.
+
+
+ Click Trigger
+ Clicking on the triggering element makes this popover appear. Clicking on it again will make it disappear. You can select this text, but clicking away (somewhere other than the triggering element) will not dismiss this popover.
+
+
+ Legacy Trigger
+
+ Legacy is a reactstrap special trigger value (outside of bootstrap's spec/standard). Before reactstrap correctly supported click and focus, it had a hybrid which was very useful and has been brought back as trigger="legacy". One advantage of the legacy trigger is that it allows the popover text to be selected while also closing when clicking outside the triggering element and popover itself.
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/PopoverMulti.js b/docs/lib/examples/PopoverMulti.js
index aca0f43ff..183d24e52 100644
--- a/docs/lib/examples/PopoverMulti.js
+++ b/docs/lib/examples/PopoverMulti.js
@@ -1,74 +1,65 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
-import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
+import React, { useState } from "react";
+import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";
-class PopoverItem extends React.Component {
- constructor(props) {
- super(props);
+const PopoverItem = props => {
+ const { id, item } = props;
+ const [popoverOpen, setPopoverOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- popoverOpen: false
- };
- }
+ const toggle = () => setPopoverOpen(!popoverOpen);
- toggle() {
- this.setState({
- popoverOpen: !this.state.popoverOpen
- });
- }
+ return (
+
+
+
- { this.state.popovers.map((popover, i) => {
- return
- );
- }
-}
+ ].map((popover, i) => {
+ return
-
- );
- }
+const Example = (props) => {
+ return (
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/SpinnerGrower.js b/docs/lib/examples/SpinnerGrower.js
index 95625a534..557d88a6d 100644
--- a/docs/lib/examples/SpinnerGrower.js
+++ b/docs/lib/examples/SpinnerGrower.js
@@ -1,19 +1,19 @@
import React from 'react';
import { Spinner } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
-
-
- );
- }
+const Example = (props) => {
+ return (
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/Table.js b/docs/lib/examples/Table.js
index 787da6849..4d4f6f6d9 100644
--- a/docs/lib/examples/Table.js
+++ b/docs/lib/examples/Table.js
@@ -1,39 +1,39 @@
import React from 'react';
import { Table } from 'reactstrap';
-export default class Example extends React.Component {
- render() {
- return (
- | # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -Table heading | -Table heading | -Table heading | -Table heading | -Table heading | -Table heading | -
|---|---|---|---|---|---|---|
| 1 | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -
| 2 | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -
| 3 | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -Table cell | -
| # | +Table heading | +Table heading | +Table heading | +Table heading | +Table heading | +Table heading | +
|---|---|---|---|---|---|---|
| 1 | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +
| 2 | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +
| 3 | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +Table cell | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
| # | -First Name | -Last Name | -Username | -
|---|---|---|---|
| 1 | -Mark | -Otto | -@mdo | -
| 2 | -Jacob | -Thornton | -@fat | -
| 3 | -Larry | -the Bird | -
| # | +First Name | +Last Name | +Username | +
|---|---|---|---|
| 1 | +Mark | +Otto | +@mdo | +
| 2 | +Jacob | +Thornton | +@fat | +
| 3 | +Larry | +the Bird | +
-
-
-
-
-
-
-
-
-
- Special Title Treatment
- With supporting text below as a natural lead-in to additional content.
-
-
-
-
- Special Title Treatment
- With supporting text below as a natural lead-in to additional content.
-
-
-
-
-
-
-
- );
- }
+ return (
+ Tab 1 Contents
- -
+
+
+
+
+
+
+
+
+
+ Special Title Treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+
+ Special Title Treatment
+ With supporting text below as a natural lead-in to additional content.
+
+
+
+
+
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/ToastDismiss.js b/docs/lib/examples/ToastDismiss.js
index c4097198b..b20102a56 100644
--- a/docs/lib/examples/ToastDismiss.js
+++ b/docs/lib/examples/ToastDismiss.js
@@ -1,39 +1,27 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Button, Toast, ToastBody, ToastHeader } from 'reactstrap';
-class ToastDismissExample extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- show: false
- };
+const ToastDismissExample = (props) => {
+ const { buttonLabel } = props;
+ const [show, setShow] = useState(false);
- this.toggle = this.toggle.bind(this);
- }
+ const toggle = () => setShow(!show);
- toggle() {
- this.setState({
- show: !this.state.show
- });
- }
-
- render() {
- return (
- Tab 1 Contents
+ +
-
-
-
-
- Toast title
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-
-
- );
- }
+ return (
+ -
-
+
+
+
+
+ Toast title
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
+
+
+ );
}
export default ToastDismissExample;
diff --git a/docs/lib/examples/Tooltip.js b/docs/lib/examples/Tooltip.js
index d18fc906e..f10785256 100644
--- a/docs/lib/examples/Tooltip.js
+++ b/docs/lib/examples/Tooltip.js
@@ -1,36 +1,20 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Tooltip } from 'reactstrap';
-import { mapToCssModules } from '../../../src/utils'
-import classNames from 'classnames'
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [tooltipOpen, setTooltipOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- tooltipOpen: false
- };
- }
+ const toggle = () => setTooltipOpen(!tooltipOpen);
- toggle() {
- this.setState({
- tooltipOpen: !this.state.tooltipOpen
- });
- }
-
-
-
- render() {
- const classes = 'tooltip-inner'
- return (
- +
+
-
- Hello world!
-
-
- );
- }
+ return (
+ Somewhere in here is a tooltip.
-
+
+ Hello world!
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/TooltipAutoHide.js b/docs/lib/examples/TooltipAutoHide.js
index 90e8237c4..fb0f178d8 100644
--- a/docs/lib/examples/TooltipAutoHide.js
+++ b/docs/lib/examples/TooltipAutoHide.js
@@ -1,31 +1,20 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
+import React, { useState } from 'react';
import { Tooltip } from 'reactstrap';
-export default class Example extends React.Component {
- constructor(props) {
- super(props);
+const Example = (props) => {
+ const [tooltipOpen, setTooltipOpen] = useState(false);
- this.toggle = this.toggle.bind(this);
- this.state = {
- tooltipOpen: false
- };
- }
+ const toggle = () => setTooltipOpen(!tooltipOpen);
- toggle() {
- this.setState({
- tooltipOpen: !this.state.tooltipOpen
- });
- }
-
- render() {
- return (
- Somewhere in here is a tooltip.
+
-
- Try to select this text!
-
-
- );
- }
+ return (
+ Sometimes you need to allow users to select text within a tooltip.
-
+
+ Try to select this text!
+
+
+ );
}
+
+export default Example;
diff --git a/docs/lib/examples/TooltipMulti.js b/docs/lib/examples/TooltipMulti.js
index 2eb70cc6e..7a08f5bfa 100644
--- a/docs/lib/examples/TooltipMulti.js
+++ b/docs/lib/examples/TooltipMulti.js
@@ -1,73 +1,56 @@
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
-import React from 'react';
-import { Button, Tooltip } from 'reactstrap';
-
-class TooltipItem extends React.Component {
- constructor(props) {
- super(props);
-
- this.toggle = this.toggle.bind(this);
- this.state = {
- tooltipOpen: false
- };
- }
-
- toggle() {
- this.setState({
- tooltipOpen: !this.state.tooltipOpen
- });
- }
-
- render() {
- return (
-
-
- Sometimes you need to allow users to select text within a tooltip.
+
- { this.state.tooltips.map((tooltip, i) => {
- return
- );
- }
-}
+ ].map((tooltip, i) => {
+ return