` or `
+ Button Dropdown
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonDropdownMulti.js b/stories/examples/ButtonDropdownMulti.js
new file mode 100644
index 000000000..e01e72f77
--- /dev/null
+++ b/stories/examples/ButtonDropdownMulti.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import {
+ ButtonDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setOpen] = useState(false);
+
+ const toggle = () => setOpen(!dropdownOpen);
+
+ return (
+
+ Click Me
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonDropdownMultiSplit.js b/stories/examples/ButtonDropdownMultiSplit.js
new file mode 100644
index 000000000..c9704f18d
--- /dev/null
+++ b/stories/examples/ButtonDropdownMultiSplit.js
@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import {
+ Button,
+ ButtonDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setOpen] = useState(false);
+
+ const toggle = () => setOpen(!dropdownOpen);
+
+ return (
+
+ Click Me
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonDropdownUncontrolled.js b/stories/examples/ButtonDropdownUncontrolled.js
new file mode 100644
index 000000000..5795aa679
--- /dev/null
+++ b/stories/examples/ButtonDropdownUncontrolled.js
@@ -0,0 +1,25 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import {
+ UncontrolledButtonDropdown,
+ DropdownMenu,
+ DropdownItem,
+ DropdownToggle,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Dropdown
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonGroup/ButtonCloseIcon.js b/stories/examples/ButtonGroup/ButtonCloseIcon.js
new file mode 100644
index 000000000..6d2188d31
--- /dev/null
+++ b/stories/examples/ButtonGroup/ButtonCloseIcon.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Button } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonGroup/ButtonGroup.js b/stories/examples/ButtonGroup/ButtonGroup.js
new file mode 100644
index 000000000..dfdab5e1b
--- /dev/null
+++ b/stories/examples/ButtonGroup/ButtonGroup.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Left
+ Middle
+ Right
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonGroup/MixedStyles.js b/stories/examples/ButtonGroup/MixedStyles.js
new file mode 100644
index 000000000..eace0de3f
--- /dev/null
+++ b/stories/examples/ButtonGroup/MixedStyles.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Left
+ Middle
+ Right
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ButtonGroup/Nesting.js b/stories/examples/ButtonGroup/Nesting.js
new file mode 100644
index 000000000..762288538
--- /dev/null
+++ b/stories/examples/ButtonGroup/Nesting.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import {
+ Button,
+ ButtonGroup,
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Left
+ Middle
+
+
+ Dropdown
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Place a `ButtonGroup` within another `ButtonGroup` when you want dropdown menus mixed with a series of buttons.',
+ },
+ },
+};
diff --git a/stories/examples/ButtonGroup/Props.js b/stories/examples/ButtonGroup/Props.js
new file mode 100644
index 000000000..d6a23c3b9
--- /dev/null
+++ b/stories/examples/ButtonGroup/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { ButtonGroup, ButtonToolbar } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+ Left
+ Middle
+ Right
+
+
+ Left
+ Middle
+ Right
+
+
+ Left
+ Middle
+ Right
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Instead of applying button sizing classes to every button in a group, just add `size` prop to each `ButtonGroup`, including each one when nesting multiple groups.',
+ },
+ },
+};
diff --git a/stories/examples/ButtonGroup/Stateful.js b/stories/examples/ButtonGroup/Stateful.js
new file mode 100644
index 000000000..0ab485556
--- /dev/null
+++ b/stories/examples/ButtonGroup/Stateful.js
@@ -0,0 +1,19 @@
+import Example from './StatefulExample';
+// eslint-disable-next-line import/extensions
+import ButtonStateful from '!!raw-loader!./StatefulExample';
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Combine button-like checkbox and radio toggle buttons into a seamless looking button group.',
+ },
+ source: {
+ code: ButtonStateful,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
diff --git a/stories/examples/ButtonGroup/StatefulExample.js b/stories/examples/ButtonGroup/StatefulExample.js
new file mode 100644
index 000000000..2da910433
--- /dev/null
+++ b/stories/examples/ButtonGroup/StatefulExample.js
@@ -0,0 +1,80 @@
+import React, { useState } from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+function Example(props) {
+ const [cSelected, setCSelected] = useState([]);
+ const [rSelected, setRSelected] = useState(null);
+
+ const onCheckboxBtnClick = (selected) => {
+ const index = cSelected.indexOf(selected);
+ if (index < 0) {
+ cSelected.push(selected);
+ } else {
+ cSelected.splice(index, 1);
+ }
+ setCSelected([...cSelected]);
+ };
+ return (
+
+
Radio Buttons
+
+ setRSelected(1)}
+ active={rSelected === 1}
+ >
+ Radio 1
+
+ setRSelected(2)}
+ active={rSelected === 2}
+ >
+ Radio 2
+
+ setRSelected(3)}
+ active={rSelected === 3}
+ >
+ Radio 3
+
+
+
Selected: {rSelected}
+
+
Checkbox Buttons
+
+ onCheckboxBtnClick(1)}
+ active={cSelected.includes(1)}
+ >
+ Checkbox 1
+
+ onCheckboxBtnClick(2)}
+ active={cSelected.includes(2)}
+ >
+ Checkbox 2
+
+ onCheckboxBtnClick(3)}
+ active={cSelected.includes(3)}
+ >
+ Checkbox 3
+
+
+
Selected: {JSON.stringify(cSelected)}
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+ 5
+ 6
+ 7
+
+
+ 8
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Combine sets of button groups into button toolbars for more complex components. Use utility classes as needed to space out groups, buttons, and more.',
+ },
+ },
+};
diff --git a/stories/examples/ButtonGroup/Vertical.js b/stories/examples/ButtonGroup/Vertical.js
new file mode 100644
index 000000000..933473b0b
--- /dev/null
+++ b/stories/examples/ButtonGroup/Vertical.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Button
+ Button
+ Button
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**',
+ },
+ },
+};
diff --git a/stories/examples/Card/Alignment.js b/stories/examples/Card/Alignment.js
new file mode 100644
index 000000000..80247e92f
--- /dev/null
+++ b/stories/examples/Card/Alignment.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Card, Button, CardTitle, CardText } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Go somewhere
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Go somewhere
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Go somewhere
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'You can quickly change the text alignment of any card—in its entirety or specific parts.',
+ },
+ },
+};
diff --git a/stories/examples/Card/Backgrounds.js b/stories/examples/Card/Backgrounds.js
new file mode 100644
index 000000000..033104cd9
--- /dev/null
+++ b/stories/examples/Card/Backgrounds.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card, CardTitle, CardText, CardHeader, CardBody } from 'reactstrap';
+import { colors } from '../options';
+
+function Example(props) {
+ return (
+ <>
+ {colors.map((color) => (
+
+ Header
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+
+
+ ))}
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Cards include various options for customizing their backgrounds.',
+ },
+ },
+};
diff --git a/stories/examples/Card/Body.js b/stories/examples/Card/Body.js
new file mode 100644
index 000000000..d4c149db1
--- /dev/null
+++ b/stories/examples/Card/Body.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Card, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap';
+
+function Example(args) {
+ return (
+
+
+ Card Title
+
+ Card subtitle
+
+ This is some text within a card body.
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'The building block of a card is the `CardBody` Use it whenever you need a padded section within a card.',
+ },
+ },
+};
diff --git a/stories/examples/Card/Card.js b/stories/examples/Card/Card.js
new file mode 100644
index 000000000..36c91839c
--- /dev/null
+++ b/stories/examples/Card/Card.js
@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+ Card,
+ CardText,
+ CardBody,
+ CardTitle,
+ CardSubtitle,
+ Button,
+} from 'reactstrap';
+import { colors } from '../options';
+
+function Example(args) {
+ return (
+
+
+ Card title
+
+ Card subtitle
+
+
+ Some quick example text to build on the card title and make up the
+ bulk of the card‘s content.
+
+ Button
+
+
+ );
+}
+
+Example.args = {
+ color: undefined,
+ outline: false,
+ inverse: false,
+ body: false,
+};
+
+Example.argTypes = {
+ color: {
+ control: { type: 'select' },
+ options: colors,
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Card/Columns.js b/stories/examples/Card/Columns.js
new file mode 100644
index 000000000..21ef58f8a
--- /dev/null
+++ b/stories/examples/Card/Columns.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import {
+ Card,
+ Button,
+ CardImg,
+ CardTitle,
+ CardText,
+ CardColumns,
+ CardSubtitle,
+ CardBody,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+ Button
+
+
+
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This card has supporting text below as a natural lead-in to
+ additional content.
+
+ Button
+
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Button
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This card has even longer content than the
+ first to show that equal height action.
+
+ Button
+
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Button
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Card/ContentTypes.js b/stories/examples/Card/ContentTypes.js
new file mode 100644
index 000000000..cc84cbd60
--- /dev/null
+++ b/stories/examples/Card/ContentTypes.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+ Card,
+ CardText,
+ CardBody,
+ CardLink,
+ CardTitle,
+ CardSubtitle,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Card title
+
+ Card subtitle
+
+
+
+
+ Some quick example text to build on the card title and make up the
+ bulk of the card‘s content.
+
+ Card Link
+ Another Link
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Cards support a wide variety of content, including images, text, list groups, links, and more\n\nThe building block of a card is the `CardBody` Use it whenever you need a padded section within a card.\n\nCard titles are used by adding `CardTitle` with an optional `h*` prop. In the same way, links are added and placed next to each other by adding `CardLink`',
+ },
+ },
+};
diff --git a/stories/examples/Card/Decks.js b/stories/examples/Card/Decks.js
new file mode 100644
index 000000000..f7f7596d5
--- /dev/null
+++ b/stories/examples/Card/Decks.js
@@ -0,0 +1,78 @@
+import React from 'react';
+import {
+ Card,
+ Button,
+ CardImg,
+ CardTitle,
+ CardText,
+ CardDeck,
+ CardSubtitle,
+ CardBody,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+ Button
+
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This card has supporting text below as a natural lead-in to
+ additional content.
+
+ Button
+
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This card has even longer content than the
+ first to show that equal height action.
+
+ Button
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Card/Groups.js b/stories/examples/Card/Groups.js
new file mode 100644
index 000000000..15775f9b0
--- /dev/null
+++ b/stories/examples/Card/Groups.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import {
+ Card,
+ Button,
+ CardImg,
+ CardTitle,
+ CardText,
+ CardGroup,
+ CardSubtitle,
+ CardBody,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+ Button
+
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This card has supporting text below as a natural lead-in to
+ additional content.
+
+ Button
+
+
+
+
+ Card title
+
+ Card subtitle
+
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This card has even longer content than the
+ first to show that equal height action.
+
+ Button
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use card groups to render cards as a single, attached element with equal width and height columns. ',
+ },
+ },
+};
diff --git a/stories/examples/Card/HeaderFooter.js b/stories/examples/Card/HeaderFooter.js
new file mode 100644
index 000000000..ec1cc1aa5
--- /dev/null
+++ b/stories/examples/Card/HeaderFooter.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+ Card,
+ Button,
+ CardHeader,
+ CardFooter,
+ CardBody,
+ CardTitle,
+ CardText,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Header
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional content.
+
+ Go somewhere
+
+ Footer
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Add an optional header and/or footer within a card.',
+ },
+ },
+};
diff --git a/stories/examples/Card/ImageCaps.js b/stories/examples/Card/ImageCaps.js
new file mode 100644
index 000000000..76d3b99df
--- /dev/null
+++ b/stories/examples/Card/ImageCaps.js
@@ -0,0 +1,58 @@
+import React from 'react';
+import { Card, CardBody, CardTitle, CardText, CardImg } from 'reactstrap';
+
+function Example(props) {
+ return (
+ <>
+
+
+ Card Title
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+
+ Last updated 3 mins ago
+
+
+
+
+
+ Card Title
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+
+ Last updated 3 mins ago
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.',
+ },
+ },
+};
diff --git a/stories/examples/Card/ImageOverlay.js b/stories/examples/Card/ImageOverlay.js
new file mode 100644
index 000000000..2160e8079
--- /dev/null
+++ b/stories/examples/Card/ImageOverlay.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Card Title
+
+ This is a wider card with supporting text below as a natural lead-in
+ to additional content. This content is a little bit longer.
+
+
+ Last updated 3 mins ago
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.',
+ },
+ },
+};
diff --git a/stories/examples/Card/KitchenSInk.js b/stories/examples/Card/KitchenSInk.js
new file mode 100644
index 000000000..a650340cc
--- /dev/null
+++ b/stories/examples/Card/KitchenSInk.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+ Card,
+ CardText,
+ CardBody,
+ CardTitle,
+ ListGroup,
+ ListGroupItem,
+ CardLink,
+} from 'reactstrap';
+
+function Example(args) {
+ return (
+
+
+ Card Title
+ This is some text within a card body.
+
+
+ An item
+ A second item
+ And a third item
+
+
+ Card Link
+ Another Card Link
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group-all wrapped in a fixed-width card.',
+ },
+ },
+};
diff --git a/stories/examples/Card/ListGroup.js b/stories/examples/Card/ListGroup.js
new file mode 100644
index 000000000..b2c3131d9
--- /dev/null
+++ b/stories/examples/Card/ListGroup.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Card, CardHeader, ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(args) {
+ return (
+
+ Featured
+
+ An item
+ A second item
+ And a third item
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Create lists of content in a card with a flush list group.',
+ },
+ },
+};
diff --git a/stories/examples/Card/Outline.js b/stories/examples/Card/Outline.js
new file mode 100644
index 000000000..8b35b44ee
--- /dev/null
+++ b/stories/examples/Card/Outline.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Card, CardTitle, CardText, CardBody, CardHeader } from 'reactstrap';
+import { colors } from '../options';
+
+function Example(props) {
+ return (
+ <>
+ {colors.map((color) => (
+
+ Header
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+
+
+ ))}
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Cards include various options for customizing their borders too.',
+ },
+ },
+};
diff --git a/stories/examples/Card/Props.js b/stories/examples/Card/Props.js
new file mode 100644
index 000000000..af4aaad33
--- /dev/null
+++ b/stories/examples/Card/Props.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+ Card,
+ CardBody,
+ CardHeader,
+ CardImg,
+ CardSubtitle,
+ CardTitle,
+ CardFooter,
+ CardText,
+} from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return (
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated.You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.\n\nUsing the grid, wrap cards in columns and rows as needed.',
+ },
+ },
+};
diff --git a/stories/examples/Carousel/Carousel.js b/stories/examples/Carousel/Carousel.js
new file mode 100644
index 000000000..4c1fb9578
--- /dev/null
+++ b/stories/examples/Carousel/Carousel.js
@@ -0,0 +1,21 @@
+import Example from './CarouselExample';
+// eslint-disable-next-line import/extensions
+import CarouselExample from '!!raw-loader!./CarouselExample';
+
+Example.args = {
+ dark: false,
+ slide: true,
+ fade: false,
+};
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CarouselExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Carousel/CarouselExample.js b/stories/examples/Carousel/CarouselExample.js
new file mode 100644
index 000000000..5845a849b
--- /dev/null
+++ b/stories/examples/Carousel/CarouselExample.js
@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import {
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
+ CarouselCaption,
+} from 'reactstrap';
+
+const items = [
+ {
+ src: 'https://picsum.photos/id/123/1200/400',
+ altText: 'Slide 1',
+ caption: 'Slide 1',
+ key: 1,
+ },
+ {
+ src: 'https://picsum.photos/id/456/1200/400',
+ altText: 'Slide 2',
+ caption: 'Slide 2',
+ key: 2,
+ },
+ {
+ src: 'https://picsum.photos/id/678/1200/400',
+ altText: 'Slide 3',
+ caption: 'Slide 3',
+ key: 3,
+ },
+];
+
+function Example(args) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [animating, setAnimating] = useState(false);
+
+ const next = () => {
+ if (animating) return;
+ const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+ setActiveIndex(nextIndex);
+ };
+
+ const previous = () => {
+ if (animating) return;
+ const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
+ setActiveIndex(nextIndex);
+ };
+
+ const goToIndex = (newIndex) => {
+ if (animating) return;
+ setActiveIndex(newIndex);
+ };
+
+ const slides = items.map((item) => {
+ return (
+ setAnimating(true)}
+ onExited={() => setAnimating(false)}
+ key={item.src}
+ >
+
+ );
+ });
+
+ return (
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Carousel/CustomTag.js b/stories/examples/Carousel/CustomTag.js
new file mode 100644
index 000000000..422dd48b8
--- /dev/null
+++ b/stories/examples/Carousel/CustomTag.js
@@ -0,0 +1,15 @@
+import Example from './CustomTagExample';
+// eslint-disable-next-line import/extensions
+import CarouselCustomTagExample from '!!raw-loader!./CustomTagExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CarouselCustomTagExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Carousel/CustomTagExample.js b/stories/examples/Carousel/CustomTagExample.js
new file mode 100644
index 000000000..8b98531a7
--- /dev/null
+++ b/stories/examples/Carousel/CustomTagExample.js
@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import {
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
+ CarouselCaption,
+} from 'reactstrap';
+
+const items = [
+ {
+ id: 1,
+ altText: 'Slide 1',
+ caption: 'Slide 1',
+ },
+ {
+ id: 2,
+ altText: 'Slide 2',
+ caption: 'Slide 2',
+ },
+ {
+ id: 3,
+ altText: 'Slide 3',
+ caption: 'Slide 3',
+ },
+];
+
+function Example(props) {
+ const [activeIndex, setActiveIndex] = useState(0);
+ const [animating, setAnimating] = useState(false);
+
+ const next = () => {
+ if (animating) return;
+ const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
+ setActiveIndex(nextIndex);
+ };
+
+ const previous = () => {
+ if (animating) return;
+ const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
+ setActiveIndex(nextIndex);
+ };
+
+ const goToIndex = (newIndex) => {
+ if (animating) return;
+ setActiveIndex(newIndex);
+ };
+
+ const slides = items.map((item) => {
+ return (
+ setAnimating(true)}
+ onExited={() => setAnimating(false)}
+ >
+
+ );
+ });
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Carousel/Props.js b/stories/examples/Carousel/Props.js
new file mode 100644
index 000000000..606b253c7
--- /dev/null
+++ b/stories/examples/Carousel/Props.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
+ CarouselCaption,
+} from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return (
+
+
+ Example Button floated left
+
+
+ Example Button floated right
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/CloseButton/CloseButton.js b/stories/examples/CloseButton/CloseButton.js
new file mode 100644
index 000000000..98acaea24
--- /dev/null
+++ b/stories/examples/CloseButton/CloseButton.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { CloseButton } from 'reactstrap';
+
+function Example(args) {
+ return
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Change the default `ButtonClose` to be white with the `variant` prop. ',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Collapse/Collapse.js b/stories/examples/Collapse/Collapse.js
new file mode 100644
index 000000000..50b0f9b0a
--- /dev/null
+++ b/stories/examples/Collapse/Collapse.js
@@ -0,0 +1,19 @@
+import Example from './CollapseExample';
+// eslint-disable-next-line import/extensions
+import CollapseExample from '!!raw-loader!./CollapseExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CollapseExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+Example.args = {
+ horizontal: false,
+};
+
+export default Example;
diff --git a/stories/examples/Collapse/CollapseExample.js b/stories/examples/Collapse/CollapseExample.js
new file mode 100644
index 000000000..1c47da2e8
--- /dev/null
+++ b/stories/examples/Collapse/CollapseExample.js
@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card } from 'reactstrap';
+
+function Example(args) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+
+
+ Toggle
+
+
+
+
+ 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/stories/examples/Collapse/Events.js b/stories/examples/Collapse/Events.js
new file mode 100644
index 000000000..96742cdf8
--- /dev/null
+++ b/stories/examples/Collapse/Events.js
@@ -0,0 +1,18 @@
+import Example from './EventsExample';
+// eslint-disable-next-line import/extensions
+import CollapseEvents from '!!raw-loader!./EventsExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CollapseEvents,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Track events as they happen.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Collapse/EventsExample.js b/stories/examples/Collapse/EventsExample.js
new file mode 100644
index 000000000..932146a0d
--- /dev/null
+++ b/stories/examples/Collapse/EventsExample.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card } from 'reactstrap';
+
+function 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 (
+
+
+ Toggle
+
+
Current 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/stories/examples/Collapse/Horizontal.js b/stories/examples/Collapse/Horizontal.js
new file mode 100644
index 000000000..90bef6258
--- /dev/null
+++ b/stories/examples/Collapse/Horizontal.js
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import { Alert, Collapse, Button } from 'reactstrap';
+
+function Example(props) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+
+
+ Toggle
+
+
+
+ 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.
+
+
+
+
+ Toggle
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
+ magni, voluptas debitis similique porro a molestias consequuntur
+ earum odio officiis natus, amet hic, iste sed dignissimos esse fuga!
+ Minus, alias.
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Not a fan of state, we got you covered.',
+ },
+ },
+};
diff --git a/stories/examples/Color.js b/stories/examples/Color.js
new file mode 100644
index 000000000..13388261e
--- /dev/null
+++ b/stories/examples/Color.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+function Example(props) {
+ return (
+
+
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
+
+
+ Nullam id dolor id nibh ultricies vehicula ut id elit.
+
+
+ Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+
+
+ Maecenas sed diam eget risus varius blandit sit amet non magna.
+
+
+ Etiam porta sem malesuada magna mollis euismod.
+
+
+ Donec ullamcorper nulla non metus auctor fringilla.
+
+
+ Etiam porta sem malesuada ultricies vehicula.
+
+
.container
+
+ .container-sm
+
+
+ .container-md
+
+
+ .container-lg
+
+
+ .container-xl
+
+
+ .container-fluid
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Dropdown/Container.js b/stories/examples/Dropdown/Container.js
new file mode 100644
index 000000000..a91a967aa
--- /dev/null
+++ b/stories/examples/Dropdown/Container.js
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import {
+ Dropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+ const [lastClicked, setLastClicked] = useState(null);
+
+ return (
+
+ Container with overflow: hidden.
+
+ Dropdown
+
+ setLastClicked(1)}>
+ Action 1
+
+ setLastClicked(2)}>
+ Action 2
+
+ setLastClicked(3)}>
+ Action 3
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Dropdown/Custom.js b/stories/examples/Dropdown/Custom.js
new file mode 100644
index 000000000..45257dc40
--- /dev/null
+++ b/stories/examples/Dropdown/Custom.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+
+ return (
+
+
+ Custom Dropdown Content
+
+
+ Custom dropdown item
+ Custom dropdown item
+ Custom dropdown item
+ Custom dropdown item
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Dropdown/Dark.js b/stories/examples/Dropdown/Dark.js
new file mode 100644
index 000000000..8f6ab6166
--- /dev/null
+++ b/stories/examples/Dropdown/Dark.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+ UncontrolledDropdown,
+} from 'reactstrap';
+
+function Example(args) {
+ return (
+
+
+ Primary
+
+
+ Header
+ Some Action
+ Dropdown Item Text
+ Action (disabled)
+ Foo Action
+ Bar Action
+ Quo Action
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Opt into darker dropdowns to match a dark navbar or custom style by adding `dark` prop onto an existing `DropdownMenu`.',
+ },
+ },
+};
diff --git a/stories/examples/Dropdown/DirectionKitchen.js b/stories/examples/Dropdown/DirectionKitchen.js
new file mode 100644
index 000000000..9a0ef5d4e
--- /dev/null
+++ b/stories/examples/Dropdown/DirectionKitchen.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import {
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+const directions = ['up', 'down', 'end', 'start'];
+
+export default function Example(args) {
+ return (
+
+ {directions.map((direction) => (
+
+
+ {`Drop${direction}`}
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ ))}
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Trigger dropdown menus at the direction you want using the `direction` prop.',
+ },
+ },
+};
diff --git a/stories/examples/Dropdown/Dropdown.js b/stories/examples/Dropdown/Dropdown.js
new file mode 100644
index 000000000..23898f5c8
--- /dev/null
+++ b/stories/examples/Dropdown/Dropdown.js
@@ -0,0 +1,28 @@
+import Example from './DropdownExample';
+// eslint-disable-next-line import/extensions
+import Dropdown from '!!raw-loader!./DropdownExample';
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: Dropdown,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+Example.args = {
+ dark: false,
+ end: false,
+ flip: false,
+};
+
+Example.argTypes = {
+ direction: {
+ control: { type: 'select' },
+ options: ['up', 'down', 'start', 'end'],
+ },
+};
diff --git a/stories/examples/Dropdown/DropdownExample.js b/stories/examples/Dropdown/DropdownExample.js
new file mode 100644
index 000000000..9ac433aad
--- /dev/null
+++ b/stories/examples/Dropdown/DropdownExample.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import {
+ Dropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+import PropTypes from 'prop-types';
+
+function Example({ direction, ...args }) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+
+ return (
+
+
+ Dropdown
+
+ Header
+ Some Action
+ Dropdown Item Text
+ Action (disabled)
+ Foo Action
+ Bar Action
+ Quo Action
+
+
+
+ );
+}
+
+Example.propTypes = {
+ direction: PropTypes.string,
+};
+
+export default Example;
diff --git a/stories/examples/Dropdown/Props.js b/stories/examples/Dropdown/Props.js
new file mode 100644
index 000000000..8d1213e15
--- /dev/null
+++ b/stories/examples/Dropdown/Props.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import {
+ Dropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return (
+
+
+
+
+ Inactive Link
+
+
+
+
+ Dropdown
+
+
+
+ Link
+
+
+
+
+
+ );
+}
diff --git a/stories/examples/Dropdown/Sizing.js b/stories/examples/Dropdown/Sizing.js
new file mode 100644
index 000000000..4367351e9
--- /dev/null
+++ b/stories/examples/Dropdown/Sizing.js
@@ -0,0 +1,19 @@
+import Example from './SizingExample';
+// eslint-disable-next-line import/extensions
+import DropdownSizing from '!!raw-loader!./SizingExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: DropdownSizing,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story:
+ 'Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Dropdown/SizingExample.js b/stories/examples/Dropdown/SizingExample.js
new file mode 100644
index 000000000..abd175d7a
--- /dev/null
+++ b/stories/examples/Dropdown/SizingExample.js
@@ -0,0 +1,25 @@
+import React, { useState } from 'react';
+import {
+ Dropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const toggle = () => setDropdownOpen((prevState) => !prevState);
+
+ return (
+
+
+ Large Button
+
+
+ Header
+ Action
+
+
+ );
+}
+export default Example;
diff --git a/stories/examples/Dropdown/Split.js b/stories/examples/Dropdown/Split.js
new file mode 100644
index 000000000..14ac8b90d
--- /dev/null
+++ b/stories/examples/Dropdown/Split.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import {
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+ Button,
+ UncontrolledDropdown,
+} from 'reactstrap';
+
+function Example(args) {
+ return (
+
+ Primary
+
+ Header
+ Some Action
+ Dropdown Item Text
+ Action (disabled)
+ Foo Action
+ Bar Action
+ Quo Action
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Create split button dropdowns with virtually the same markup as single button dropdowns.',
+ },
+ },
+};
diff --git a/stories/examples/Dropdown/Uncontrolled.js b/stories/examples/Dropdown/Uncontrolled.js
new file mode 100644
index 000000000..7441973fe
--- /dev/null
+++ b/stories/examples/Dropdown/Uncontrolled.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+export default function Example() {
+ return (
+
+ Dropdown
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'And if you are not a fan of using `state`, feel free to use the `UncontrolledDropdown`.',
+ },
+ },
+};
diff --git a/stories/examples/Fade.js b/stories/examples/Fade.js
new file mode 100644
index 000000000..2b1e14d18
--- /dev/null
+++ b/stories/examples/Fade.js
@@ -0,0 +1,21 @@
+import React, { useState } from 'react';
+import { Button, Fade } from 'reactstrap';
+
+function Example(props) {
+ const [fadeIn, setFadeIn] = useState(true);
+
+ const toggle = () => setFadeIn(!fadeIn);
+
+ return (
+
+
+ Toggle Fade
+
+
+ This content will fade in and out as the button is pressed
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/FadeProps.js b/stories/examples/FadeProps.js
new file mode 100644
index 000000000..f8e6829d7
--- /dev/null
+++ b/stories/examples/FadeProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Fade } from 'reactstrap';
+import Props from './Props';
+
+function Example() {
+ return
+
+ );
+}
+
+Example.args = {
+ type: 'text',
+ valid: false,
+ invalid: false,
+};
+
+Example.argTypes = {
+ valid: {
+ control: { type: 'boolean' },
+ },
+ invalid: {
+ control: { type: 'boolean' },
+ },
+ type: {
+ control: { type: 'select' },
+ options: [
+ 'button',
+ 'checkbox',
+ 'color',
+ 'date',
+ 'datetime-local',
+ 'email',
+ 'file',
+ 'month',
+ 'number',
+ 'password',
+ 'radio',
+ 'range',
+ 'reset',
+ 'search',
+ 'select',
+ 'submit',
+ 'switch',
+ 'tel',
+ 'text',
+ 'textarea',
+ 'time',
+ 'url',
+ 'week',
+ ],
+ },
+ bsSize: {
+ control: { type: 'select' },
+ options: ['', 'sm', 'lg'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Form/InputGridSizing.js b/stories/examples/Form/InputGridSizing.js
new file mode 100644
index 000000000..3bb56f621
--- /dev/null
+++ b/stories/examples/Form/InputGridSizing.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Col, Form, FormGroup, Label, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Form/InputSizing.js b/stories/examples/Form/InputSizing.js
new file mode 100644
index 000000000..29a301a6e
--- /dev/null
+++ b/stories/examples/Form/InputSizing.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Form, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Form/InputType.js b/stories/examples/Form/InputType.js
new file mode 100644
index 000000000..a74b46d2d
--- /dev/null
+++ b/stories/examples/Form/InputType.js
@@ -0,0 +1,150 @@
+import React, { useState } from 'react';
+import { Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+
+function Example(props) {
+ const [value, setValue] = useState('Some plain text/ static value');
+ return (
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Form/LabelFloating.js b/stories/examples/Form/LabelFloating.js
new file mode 100644
index 000000000..0ca2d1931
--- /dev/null
+++ b/stories/examples/Form/LabelFloating.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+ <>
+
+ Wrap a pair of <Input> and <Label>{' '}
+ components in <FormGroup floating> to enable floating
+ labels with Bootstrap’s textual form fields. A placeholder{' '}
+ is required on each <Input> as our method of CSS-only
+ floating labels uses the :placeholder-shown pseudo-element.
+ Also note that the <Input> must come first so we can
+ utilize a sibling selector (e.g., ~).
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Form/LabelHidden.js b/stories/examples/Form/LabelHidden.js
new file mode 100644
index 000000000..0458ac007
--- /dev/null
+++ b/stories/examples/Form/LabelHidden.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Form/Switches.js b/stories/examples/Form/Switches.js
new file mode 100644
index 000000000..33b5f1941
--- /dev/null
+++ b/stories/examples/Form/Switches.js
@@ -0,0 +1,23 @@
+import Example from './SwitchesExample';
+// eslint-disable-next-line import/extensions
+import SwitchesExample from '!!raw-loader!./SwitchesExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: SwitchesExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story:
+ 'A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.',
+ },
+ },
+};
+
+Example.args = {
+ horizontal: false,
+};
+
+export default Example;
diff --git a/stories/examples/Form/SwitchesExample.js b/stories/examples/Form/SwitchesExample.js
new file mode 100644
index 000000000..b18287973
--- /dev/null
+++ b/stories/examples/Form/SwitchesExample.js
@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import { Form, FormGroup, Label, Input } from 'reactstrap';
+
+function Example(props) {
+ const [state, setState] = useState(true);
+
+ return (
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/InputGroup/Addon.js b/stories/examples/InputGroup/Addon.js
new file mode 100644
index 000000000..84de52083
--- /dev/null
+++ b/stories/examples/InputGroup/Addon.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ To the Left!
+
+
+ To the Right!
+
+
+ To the Left!
+ To the Right!
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Multiple add-ons are supported and can be mixed with checkbox and radio input versions.',
+ },
+ },
+};
diff --git a/stories/examples/InputGroup/Button.js b/stories/examples/InputGroup/Button.js
new file mode 100644
index 000000000..33425c57a
--- /dev/null
+++ b/stories/examples/InputGroup/Button.js
@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {
+ InputGroup,
+ Input,
+ Button,
+ ButtonDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [splitButtonOpen, setSplitButtonOpen] = useState(false);
+
+ const toggleDropDown = () => setDropdownOpen(!dropdownOpen);
+
+ const toggleSplit = () => setSplitButtonOpen(!splitButtonOpen);
+
+ return (
+
+
+ I‘m a button
+
+
+
+ Button Dropdown
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+
+
+ Split Button
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+ I‘m a button
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/InputGroup/ButtonShorthand.js b/stories/examples/InputGroup/ButtonShorthand.js
new file mode 100644
index 000000000..15c0edeb4
--- /dev/null
+++ b/stories/examples/InputGroup/ButtonShorthand.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import { InputGroup, Button, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ To the Left!
+
+
+ To the Right!
+
+
+ To the Left!
+ To the Right!
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/InputGroup/Overview.js b/stories/examples/InputGroup/Overview.js
new file mode 100644
index 000000000..65d8e5f88
--- /dev/null
+++ b/stories/examples/InputGroup/Overview.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { InputGroup, InputGroupText, Input } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ @
+
+
+
+
+
+
+ @example.com
+
+
+ $
+ $
+ $
+ $
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/InputGroup/Props.js b/stories/examples/InputGroup/Props.js
new file mode 100644
index 000000000..22d014265
--- /dev/null
+++ b/stories/examples/InputGroup/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputGroup, InputGroupText } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+ @lg
+
+
+ @normal
+
+
+ @sm
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add the relative form sizing classes to the `InputGroup` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.',
+ },
+ },
+};
diff --git a/stories/examples/Layout.js b/stories/examples/Layout.js
new file mode 100644
index 000000000..53f228ae0
--- /dev/null
+++ b/stories/examples/Layout.js
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/LayoutProps.js b/stories/examples/LayoutProps.js
new file mode 100644
index 000000000..3cc341078
--- /dev/null
+++ b/stories/examples/LayoutProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+import Props from './Props';
+
+function Example() {
+ return
+ xs=“2“
+
+
+ xs=“3“
+
+
+ xs=“4“
+
+
+ xs=“4“
+
+
+ xs=“1“ sm=“2“ md=“4“
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/List/Inline.js b/stories/examples/List/Inline.js
new file mode 100644
index 000000000..2ea22ad93
--- /dev/null
+++ b/stories/examples/List/Inline.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { List, ListInlineItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Lorem ipsum
+ Phasellus iaculis
+ Nulla volutpat
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Remove a list’s bullets and apply some light margin',
+ },
+ },
+};
diff --git a/stories/examples/List/List.js b/stories/examples/List/List.js
new file mode 100644
index 000000000..d974766ec
--- /dev/null
+++ b/stories/examples/List/List.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { List } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Lorem ipsum
+ Phasellus iaculis
+ Nulla volutpat
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/List/Props.js b/stories/examples/List/Props.js
new file mode 100644
index 000000000..d9475b066
--- /dev/null
+++ b/stories/examples/List/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { List, ListInlineItem } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+
+ Nulla volutpat aliquam velit
+
+ Phasellus iaculis neque
+ Purus sodales ultricies
+ Vestibulum laoreet porttitor sem
+ Ac tristique libero volutpat at
+
+
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Remove the default `list-style` and `left margin` on list items (immediate children only).',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Active.js b/stories/examples/ListGroup/Active.js
new file mode 100644
index 000000000..097aa445b
--- /dev/null
+++ b/stories/examples/ListGroup/Active.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(args) {
+ return (
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add `active` prop to a `ListGroupItem` to indicate the current active selection.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Badge.js b/stories/examples/ListGroup/Badge.js
new file mode 100644
index 000000000..32639dc67
--- /dev/null
+++ b/stories/examples/ListGroup/Badge.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ListGroup, ListGroupItem, Badge } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Cras justo odio 14
+
+
+ Dapibus ac facilisis in 2
+
+
+ Morbi leo risus 1
+
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add badges to any list group item to show unread counts, activity, and more.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/ContextualClasses.js b/stories/examples/ListGroup/ContextualClasses.js
new file mode 100644
index 000000000..6b352a2a6
--- /dev/null
+++ b/stories/examples/ListGroup/ContextualClasses.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use contextual classes to style list items with a stateful background and color.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/CustomContent.js b/stories/examples/ListGroup/CustomContent.js
new file mode 100644
index 000000000..6bbe64a45
--- /dev/null
+++ b/stories/examples/ListGroup/CustomContent.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import {
+ ListGroup,
+ ListGroupItem,
+ ListGroupItemHeading,
+ ListGroupItemText,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
+ eget risus varius blandit.
+
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
+ eget risus varius blandit.
+
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam
+ eget risus varius blandit.
+
+
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add nearly any HTML within, even for linked list groups like the one below.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/DisabledItems.js b/stories/examples/ListGroup/DisabledItems.js
new file mode 100644
index 000000000..b5b32b82c
--- /dev/null
+++ b/stories/examples/ListGroup/DisabledItems.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Cras justo odio
+
+
+ Dapibus ac facilisis in
+
+
+ Morbi leo risus
+
+
+ Porta ac consectetur ac
+
+
+ Vestibulum at eros
+
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add `disabled` prop to a `ListGroupItem` to make it *appear* disabled.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Flush.js b/stories/examples/ListGroup/Flush.js
new file mode 100644
index 000000000..25e2d1ead
--- /dev/null
+++ b/stories/examples/ListGroup/Flush.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Cras justo odio
+
+
+ Dapibus ac facilisis in
+
+
+ Morbi leo risus
+
+
+ Porta ac consectetur ac
+
+
+ Vestibulum at eros
+
+
+ );
+}
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add `flush` prop to `ListGroup` to remove some borders and rounded corners to render list group items edge-to-edge in a parent container.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Horizontal.js b/stories/examples/ListGroup/Horizontal.js
new file mode 100644
index 000000000..9756177c7
--- /dev/null
+++ b/stories/examples/ListGroup/Horizontal.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ The horizontal prop can be a Boolean or a string specifying
+ one of Bootstrap‘s breakpoints
+
+
+
+ Cras justo odio
+
+
+ Dapibus ac facilisis in
+
+
+ Morbi leo risus
+
+
+ Porta ac consectetur ac
+
+
+ Vestibulum at eros
+
+
+
+ This list group is horizontal at the lg breakpoint and up.
+
+
+
+ Cras justo odio
+
+
+ Dapibus ac facilisis in
+
+
+ Morbi leo risus
+
+
+ Porta ac consectetur ac
+
+
+ Vestibulum at eros
+
+
+
+ Note that horizontal list groups cannot be combined with flush list
+ groups. If flush is true then{' '}
+ horizontal has no effect.
+
+
+
Links
+
+ Be sure to{' '}
+
+ not use the standard .btn classes here
+
+ .
+
+
+
+ Cras justo odio
+
+
+ Dapibus ac facilisis in
+
+
+ Morbi leo risus
+
+
+ Porta ac consectetur ac
+
+
+ Vestibulum at eros
+
+
+
+
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
+
+ );
+}
+
+Example.args = {
+ flush: false,
+ horizontal: false,
+ numbered: false,
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Numbered.js b/stories/examples/ListGroup/Numbered.js
new file mode 100644
index 000000000..d8c179071
--- /dev/null
+++ b/stories/examples/ListGroup/Numbered.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ The numbered prop can be used to opt into numbered list
+ group items.
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
`s default browser styling) for better placement inside list group items and to allow for better customization.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/ListGroup/Props.js b/stories/examples/ListGroup/Props.js
new file mode 100644
index 000000000..cd80cc355
--- /dev/null
+++ b/stories/examples/ListGroup/Props.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import {
+ ListGroup,
+ ListGroupItem,
+ ListGroupItemHeading,
+ ListGroupItemText,
+} from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return (
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
+ ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
+ tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+ fringilla. Donec lacinia congue felis in faucibus.
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/MediaAlignment.js b/stories/examples/MediaAlignment.js
new file mode 100644
index 000000000..4c4ff683b
--- /dev/null
+++ b/stories/examples/MediaAlignment.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Media } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+
+ Top aligned media
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in
+ vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+ vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+
+
+ Middle aligned media
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in
+ vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+ vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+
+
+ Bottom aligned media
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in
+ vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+ vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/MediaList.js b/stories/examples/MediaList.js
new file mode 100644
index 000000000..caffdd3d3
--- /dev/null
+++ b/stories/examples/MediaList.js
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Media } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in
+ vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+ vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
+ in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
+ nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio,
+ vestibulum in vulputate at, tempus viverra turpis. Fusce
+ condimentum nunc ac nisi vulputate fringilla. Donec lacinia
+ congue felis in faucibus.
+
+
+
+
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
+ in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
+ nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in
+ vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
+ vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/MediaNested.js b/stories/examples/MediaNested.js
new file mode 100644
index 000000000..624ca88ca
--- /dev/null
+++ b/stories/examples/MediaNested.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { Media } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+ Media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque
+ ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at,
+ tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
+ fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+ Nested media heading
+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus
+ scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum
+ in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
+ nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Modal/Backdrop.js b/stories/examples/Modal/Backdrop.js
new file mode 100644
index 000000000..b69a48890
--- /dev/null
+++ b/stories/examples/Modal/Backdrop.js
@@ -0,0 +1,19 @@
+import Example from './BackdropExample';
+// eslint-disable-next-line import/extensions
+import BackdropExample from '!!raw-loader!./BackdropExample';
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.',
+ },
+ source: {
+ code: BackdropExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/BackdropExample.js b/stories/examples/Modal/BackdropExample.js
new file mode 100644
index 000000000..45f6ffdd6
--- /dev/null
+++ b/stories/examples/Modal/BackdropExample.js
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import {
+ Button,
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Input,
+ Label,
+ Form,
+ FormGroup,
+} from 'reactstrap';
+import PropTypes from 'prop-types';
+
+function Example(props) {
+ const { className } = props;
+ const [modal, setModal] = useState(false);
+ const [backdrop, setBackdrop] = useState(true);
+ const [keyboard, setKeyboard] = useState(true);
+
+ const toggle = () => setModal(!modal);
+
+ const changeBackdrop = (e) => {
+ let { value } = e.target;
+ if (value !== 'static') {
+ value = JSON.parse(value);
+ }
+ setBackdrop(value);
+ };
+
+ const changeKeyboard = (e) => {
+ setKeyboard(e.currentTarget.checked);
+ };
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+Example.propTypes = {
+ className: PropTypes.string,
+};
+
+export default Example;
diff --git a/stories/examples/Modal/CustomCloseButton.js b/stories/examples/Modal/CustomCloseButton.js
new file mode 100644
index 000000000..930862fd8
--- /dev/null
+++ b/stories/examples/Modal/CustomCloseButton.js
@@ -0,0 +1,18 @@
+import Example from './CustomCloseButtonExample';
+// eslint-disable-next-line import/extensions
+import CustomCloseButton from '!!raw-loader!./CustomCloseButtonExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CustomCloseButton,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Add a custom close button to the Modal.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/CustomCloseButtonExample.js b/stories/examples/Modal/CustomCloseButtonExample.js
new file mode 100644
index 000000000..31eeba2db
--- /dev/null
+++ b/stories/examples/Modal/CustomCloseButtonExample.js
@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+function Example(props) {
+ const { className } = props;
+
+ const [modal, setModal] = useState(false);
+ const toggle = () => setModal(!modal);
+
+ const closeBtn = (
+
+ ×
+
+ );
+
+ return (
+
+
+ Click Me
+
+
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+Example.propTypes = {
+ className: PropTypes.string,
+};
+
+export default Example;
diff --git a/stories/examples/Modal/CustomTimeout.js b/stories/examples/Modal/CustomTimeout.js
new file mode 100644
index 000000000..e10ff0975
--- /dev/null
+++ b/stories/examples/Modal/CustomTimeout.js
@@ -0,0 +1,18 @@
+import Example from './CustomTimeoutExample';
+// eslint-disable-next-line import/extensions
+import CustomTimeout from '!!raw-loader!./CustomTimeoutExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: CustomTimeout,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Add a custom timeout to the Modal.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/CustomTimeoutExample.js b/stories/examples/Modal/CustomTimeoutExample.js
new file mode 100644
index 000000000..ccd5e3473
--- /dev/null
+++ b/stories/examples/Modal/CustomTimeoutExample.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import PropTypes from 'prop-types';
+
+function Example(props) {
+ const { className } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+
+
+ Click Me
+
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+Example.propTypes = {
+ className: PropTypes.string,
+};
+
+export default Example;
diff --git a/stories/examples/Modal/Destructuring.js b/stories/examples/Modal/Destructuring.js
new file mode 100644
index 000000000..73be408c7
--- /dev/null
+++ b/stories/examples/Modal/Destructuring.js
@@ -0,0 +1,18 @@
+import Example from './DestructuringExample';
+// eslint-disable-next-line import/extensions
+import Destructuring from '!!raw-loader!./DestructuringExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: Destructuring,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Unmount modal on closing using the `unmountOnClose` prop.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/DestructuringExample.js b/stories/examples/Modal/DestructuringExample.js
new file mode 100644
index 000000000..212932d20
--- /dev/null
+++ b/stories/examples/Modal/DestructuringExample.js
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import {
+ Button,
+ Modal,
+ ModalHeader,
+ ModalBody,
+ ModalFooter,
+ Input,
+ Label,
+ Form,
+ FormGroup,
+} from 'reactstrap';
+
+function ModalExample(props) {
+ const [modal, setModal] = useState(false);
+ const [unmountOnClose, setUnmountOnClose] = useState(true);
+
+ const toggle = () => setModal(!modal);
+ const changeUnmountOnClose = (e) => {
+ let { value } = e.target;
+ setUnmountOnClose(JSON.parse(value));
+ };
+
+ return (
+
+
+
+ Modal title
+
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default ModalExample;
diff --git a/stories/examples/Modal/External.js b/stories/examples/Modal/External.js
new file mode 100644
index 000000000..87d4b2843
--- /dev/null
+++ b/stories/examples/Modal/External.js
@@ -0,0 +1,19 @@
+import Example from './ExternalExample';
+// eslint-disable-next-line import/extensions
+import External from '!!raw-loader!./ExternalExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: External,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story:
+ 'Move the close button to the outside of the `Modal` using `external` prop.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/ExternalExample.js b/stories/examples/Modal/ExternalExample.js
new file mode 100644
index 000000000..4844c871e
--- /dev/null
+++ b/stories/examples/Modal/ExternalExample.js
@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+function ModalExample(props) {
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ const externalCloseBtn = (
+
+ ×
+
+ );
+ return (
+
+
+ Click Me
+
+
+ Modal title
+
+ Look at the top right of the page/viewport!
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default ModalExample;
diff --git a/stories/examples/Modal/Fadeless.js b/stories/examples/Modal/Fadeless.js
new file mode 100644
index 000000000..e3a898d57
--- /dev/null
+++ b/stories/examples/Modal/Fadeless.js
@@ -0,0 +1,18 @@
+import Example from './FadelessExample';
+// eslint-disable-next-line import/extensions
+import Fadeless from '!!raw-loader!./FadelessExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: Fadeless,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Disable fade animation with `fade={false}` prop.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/FadelessExample.js b/stories/examples/Modal/FadelessExample.js
new file mode 100644
index 000000000..12fb54b54
--- /dev/null
+++ b/stories/examples/Modal/FadelessExample.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+function ModalExample(props) {
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+
+
+ Click Me
+
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default ModalExample;
diff --git a/stories/examples/Modal/FocusAfterClose.js b/stories/examples/Modal/FocusAfterClose.js
new file mode 100644
index 000000000..cf7d87356
--- /dev/null
+++ b/stories/examples/Modal/FocusAfterClose.js
@@ -0,0 +1,19 @@
+import Example from './FocusAfterCloseExample';
+// eslint-disable-next-line import/extensions
+import FocusAfterClose from '!!raw-loader!./FocusAfterCloseExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: FocusAfterClose,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story:
+ 'The "Open" button will be focused after close when `returnFocusAfterClose` is true and will not be focused if `returnFocusAfterClose` is false.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/FocusAfterCloseExample.js b/stories/examples/Modal/FocusAfterCloseExample.js
new file mode 100644
index 000000000..9f7643620
--- /dev/null
+++ b/stories/examples/Modal/FocusAfterCloseExample.js
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import {
+ Button,
+ Modal,
+ ModalBody,
+ ModalFooter,
+ Label,
+ Input,
+ FormGroup,
+ Form,
+} from 'reactstrap';
+
+function ModalFocusAfterClose(props) {
+ const [open, setOpen] = useState(false);
+ const [focusAfterClose, setFocusAfterClose] = useState(true);
+
+ const toggle = () => setOpen(!open);
+ const handleSelectChange = ({ target: { value } }) => {
+ setFocusAfterClose(JSON.parse(value));
+ };
+
+ return (
+
+
+
+
+ Observe the “Open“ button. It will be focused after close
+ when “returnFocusAfterClose“ is true and will not be
+ focused if “returnFocusAfterClose“ is false.
+
+
+
+ Close
+
+
+
+
+ );
+}
+
+export default ModalFocusAfterClose;
diff --git a/stories/examples/Modal/Fullscreen.js b/stories/examples/Modal/Fullscreen.js
new file mode 100644
index 000000000..9fdcf656a
--- /dev/null
+++ b/stories/examples/Modal/Fullscreen.js
@@ -0,0 +1,18 @@
+import Example from './FullscreenExample';
+// eslint-disable-next-line import/extensions
+import Fullscreen from '!!raw-loader!./FullscreenExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: Fullscreen,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Make the modal fullscreen.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/FullscreenExample.js b/stories/examples/Modal/FullscreenExample.js
new file mode 100644
index 000000000..6dd1c6f61
--- /dev/null
+++ b/stories/examples/Modal/FullscreenExample.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+function ModalFullscreenExample(props) {
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+
+
+ Click Me
+
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default ModalFullscreenExample;
diff --git a/stories/examples/Modal/Modal.js b/stories/examples/Modal/Modal.js
new file mode 100644
index 000000000..c0b40baed
--- /dev/null
+++ b/stories/examples/Modal/Modal.js
@@ -0,0 +1,36 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import Example from './ModalExample';
+// eslint-disable-next-line import/extensions
+import ModalExample from '!!raw-loader!./ModalExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: ModalExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+Example.args = {
+ fullscreen: false,
+ size: undefined,
+ backdrop: true,
+ fade: true,
+ centered: false,
+ scrollable: false,
+};
+
+Example.argTypes = {
+ fullscreen: {
+ control: { type: 'select' },
+ options: ['', true, 'sm', 'md', 'lg', 'xl'],
+ },
+ size: {
+ control: { type: 'select' },
+ options: ['', 'sm', 'lg', 'xl'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/ModalExample.js b/stories/examples/Modal/ModalExample.js
new file mode 100644
index 000000000..9b1b5aa18
--- /dev/null
+++ b/stories/examples/Modal/ModalExample.js
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+function Example(args) {
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+
+
+ Click Me
+
+
+ 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.
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Modal/Nested.js b/stories/examples/Modal/Nested.js
new file mode 100644
index 000000000..f0b014a5e
--- /dev/null
+++ b/stories/examples/Modal/Nested.js
@@ -0,0 +1,18 @@
+import Example from './NestedExample';
+// eslint-disable-next-line import/extensions
+import Nested from '!!raw-loader!./NestedExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: Nested,
+ language: 'jsx',
+ type: 'auto',
+ },
+ description: {
+ story: 'Nest modals by putting a modal inside another.',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Modal/NestedExample.js b/stories/examples/Modal/NestedExample.js
new file mode 100644
index 000000000..28aae4ef5
--- /dev/null
+++ b/stories/examples/Modal/NestedExample.js
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+function ModalExample(props) {
+ const [modal, setModal] = useState(false);
+ const [nestedModal, setNestedModal] = useState(false);
+ const [closeAll, setCloseAll] = useState(false);
+
+ const toggle = () => setModal(!modal);
+ const toggleNested = () => {
+ setNestedModal(!nestedModal);
+ setCloseAll(false);
+ };
+ const toggleAll = () => {
+ setNestedModal(!nestedModal);
+ setCloseAll(true);
+ };
+
+ return (
+
+
+ Click Me
+
+
+ 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.
+
+ Show Nested Modal
+
+
+ Nested Modal title
+ Stuff and things
+
+
+ Done
+ {' '}
+
+ All Done
+
+
+
+
+
+
+ Do Something
+ {' '}
+
+ Cancel
+
+
+
+
+ );
+}
+
+export default ModalExample;
diff --git a/stories/examples/Modal/Props.js b/stories/examples/Modal/Props.js
new file mode 100644
index 000000000..e549d506d
--- /dev/null
+++ b/stories/examples/Modal/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+
+ Link
+
+
+
+ Much Longer Nav Link
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Force your `Nav` contents to extend the full available width one of two props. To proportionately fill all available space with your `NavItem`, use `fill`. Notice that all horizontal space is occupied, but not every nav item has the same width.',
+ },
+ },
+};
diff --git a/stories/examples/Nav/Justify.js b/stories/examples/Nav/Justify.js
new file mode 100644
index 000000000..b9d88d0f5
--- /dev/null
+++ b/stories/examples/Nav/Justify.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Link
+
+
+
+ Much Longer Nav Link
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'For equal-width elements, use `justified`. All horizontal space will be occupied by nav links, but unlike the `fill` above, every nav item will be the same width.',
+ },
+ },
+};
diff --git a/stories/examples/Nav/Navs.js b/stories/examples/Nav/Navs.js
new file mode 100644
index 000000000..c57bf76a0
--- /dev/null
+++ b/stories/examples/Nav/Navs.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+function Example(args) {
+ return (
+
+
+
+ Link
+
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+Example.args = {
+ tabs: false,
+ pills: false,
+ vertical: false,
+ justified: false,
+ fill: false,
+ card: false,
+};
+
+export default Example;
diff --git a/stories/examples/Nav/Pills.js b/stories/examples/Nav/Pills.js
new file mode 100644
index 000000000..94faa7836
--- /dev/null
+++ b/stories/examples/Nav/Pills.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Link
+
+
+
+ Link
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Take the same component and add `pills` prop.',
+ },
+ },
+};
diff --git a/stories/examples/Nav/Props.js b/stories/examples/Nav/Props.js
new file mode 100644
index 000000000..016f86e63
--- /dev/null
+++ b/stories/examples/Nav/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+
+ {
+ toggle('1');
+ }}
+ >
+ Tab1
+
+
+
+ {
+ toggle('2');
+ }}
+ >
+ More Tabs
+
+
+
+
+
+
+ Tab 1 Contents
+
+
+
+
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+ Special Title Treatment
+
+ With supporting text below as a natural lead-in to additional
+ content.
+
+ Go somewhere
+
+
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Nav/Tabs.js b/stories/examples/Nav/Tabs.js
new file mode 100644
index 000000000..3c40b0c15
--- /dev/null
+++ b/stories/examples/Nav/Tabs.js
@@ -0,0 +1,19 @@
+import Example from './TabsExample';
+// eslint-disable-next-line import/extensions
+import TabsExample from '!!raw-loader!./TabsExample';
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Takes the basic Nav from above and adds the `tabs` prop to generate a tabbed interface.',
+ },
+ source: {
+ code: TabsExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Nav/TabsExample.js b/stories/examples/Nav/TabsExample.js
new file mode 100644
index 000000000..19b4bf09e
--- /dev/null
+++ b/stories/examples/Nav/TabsExample.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import {
+ Nav,
+ NavItem,
+ Dropdown,
+ DropdownItem,
+ DropdownToggle,
+ DropdownMenu,
+ NavLink,
+} from 'reactstrap';
+
+function Example(props) {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(!dropdownOpen);
+
+ return (
+
+
+
+ Link
+
+
+
+
+ Dropdown
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+ Link
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Nav/Vertical.js b/stories/examples/Nav/Vertical.js
new file mode 100644
index 000000000..fae394cec
--- /dev/null
+++ b/stories/examples/Nav/Vertical.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Link
+
+
+ Link
+
+
+ Another Link
+
+
+
+ Disabled Link
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Stack your navigation by changing the flex item direction with the `vertical` prop. Need to stack them on some viewports but not others? Use the responsive versions `vertical="sm"`.',
+ },
+ },
+};
diff --git a/stories/examples/Navbar/Brand.js b/stories/examples/Navbar/Brand.js
new file mode 100644
index 000000000..7b5a4cc9e
--- /dev/null
+++ b/stories/examples/Navbar/Brand.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Navbar, NavbarBrand } from 'reactstrap';
+
+function Example(args) {
+ return (
+ <>
+
+
+
+
+
+ Reactstrap
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ '`NavbarBrand` can be applied to most elements, be it text or images or both images and text.',
+ },
+ },
+};
diff --git a/stories/examples/Navbar/Navbar.js b/stories/examples/Navbar/Navbar.js
new file mode 100644
index 000000000..59b4c8be8
--- /dev/null
+++ b/stories/examples/Navbar/Navbar.js
@@ -0,0 +1,43 @@
+import Example from './NavbarExample';
+// eslint-disable-next-line import/extensions
+import NavbarExample from '!!raw-loader!./NavbarExample';
+import { colors } from '../options';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: NavbarExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+Example.args = {
+ color: 'light',
+ light: true,
+ dark: false,
+ expand: 'md',
+ container: 'fluid',
+};
+
+Example.argTypes = {
+ color: {
+ control: { type: 'select' },
+ options: colors,
+ },
+ container: {
+ control: { type: 'select' },
+ options: [false, true, 'sm', 'md', 'lg', 'xl', 'fluid'],
+ },
+ expand: {
+ control: { type: 'select' },
+ options: [false, true, 'sm', 'md', 'lg', 'xl'],
+ },
+ fixed: {
+ control: { type: 'select' },
+ options: ['', 'top', 'bottom'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Navbar/NavbarExample.js b/stories/examples/Navbar/NavbarExample.js
new file mode 100644
index 000000000..89846737d
--- /dev/null
+++ b/stories/examples/Navbar/NavbarExample.js
@@ -0,0 +1,56 @@
+import React, { useState } from 'react';
+import {
+ Collapse,
+ Navbar,
+ NavbarToggler,
+ NavbarBrand,
+ Nav,
+ NavItem,
+ NavLink,
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+ NavbarText,
+} from 'reactstrap';
+
+function Example(args) {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+
+
+ reactstrap
+
+
+
+ Components
+
+
+
+ GitHub
+
+
+
+
+ Options
+
+
+ Option 1
+ Option 2
+ Reset
+
+
+
+ Simple Text
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Navbar/Props.js b/stories/examples/Navbar/Props.js
new file mode 100644
index 000000000..abd8ef573
--- /dev/null
+++ b/stories/examples/Navbar/Props.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Navbar, NavbarToggler, NavbarBrand, NavbarText } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return (
+
+
+
+ reactstrap
+
+
+
+
+ Components
+
+
+
+ GitHub
+
+
+
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Offcanvas/Offcanvas.js b/stories/examples/Offcanvas/Offcanvas.js
new file mode 100644
index 000000000..8ce82db96
--- /dev/null
+++ b/stories/examples/Offcanvas/Offcanvas.js
@@ -0,0 +1,28 @@
+import Example from './OffcanvasExample';
+// eslint-disable-next-line import/extensions
+import OffcanvasExample from '!!raw-loader!./OffcanvasExample';
+
+Example.parameters = {
+ docs: {
+ source: {
+ code: OffcanvasExample,
+ language: 'jsx',
+ type: 'auto',
+ },
+ },
+};
+
+Example.args = {
+ backdrop: true,
+ fade: true,
+ scrollable: false,
+};
+
+Example.argTypes = {
+ direction: {
+ control: { type: 'select' },
+ options: ['top', 'start', 'end', 'bottom'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Offcanvas/OffcanvasExample.js b/stories/examples/Offcanvas/OffcanvasExample.js
new file mode 100644
index 000000000..57619ec2d
--- /dev/null
+++ b/stories/examples/Offcanvas/OffcanvasExample.js
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import { Button, Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
+
+function Example(args) {
+ const [open, setOpen] = useState();
+ const toggle = () => setOpen(!open);
+
+ return (
+
+ {
+ setOpen(true);
+ }}
+ >
+ Open
+
+
+ Offcanvas
+
+ This is the Offcanvas body.
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/Offcanvas/OffcanvasProps.js b/stories/examples/Offcanvas/OffcanvasProps.js
new file mode 100644
index 000000000..5d6af24a0
--- /dev/null
+++ b/stories/examples/Offcanvas/OffcanvasProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+
+
+
+
+ );
+}
+
+Example.argTypes = {
+ size: {
+ control: { type: 'select' },
+ options: ['', 'sm', 'lg'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Pagination/Props.js b/stories/examples/Pagination/Props.js
new file mode 100644
index 000000000..9442e078b
--- /dev/null
+++ b/stories/examples/Pagination/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+
+ First
+
+
+
+
+ Previous
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+ Next
+
+
+
+
+ Last
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Fancy a larger pagination? Add `size="lg"` prop.',
+ },
+ },
+};
diff --git a/stories/examples/Pagination/SizingSmall.js b/stories/examples/Pagination/SizingSmall.js
new file mode 100644
index 000000000..52c6e82d0
--- /dev/null
+++ b/stories/examples/Pagination/SizingSmall.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'If you fancy a smaller pagination you can add `size="sm"` prop.',
+ },
+ },
+};
diff --git a/stories/examples/Pagination/State.js b/stories/examples/Pagination/State.js
new file mode 100644
index 000000000..f02a2f690
--- /dev/null
+++ b/stories/examples/Pagination/State.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+
+
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Pagination links are customizable for different circumstances. Use `disabled` prop for links that appear un-clickable and `active` prop to indicate the current page.',
+ },
+ },
+};
diff --git a/stories/examples/Placeholder/Animation.js b/stories/examples/Placeholder/Animation.js
new file mode 100644
index 000000000..9d0c9120f
--- /dev/null
+++ b/stories/examples/Placeholder/Animation.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Placeholder } from 'reactstrap';
+
+function Example(args) {
+ return (
+ <>
+
+
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Use `wave` or `glow` animation using the `animation` prop.',
+ },
+ },
+};
diff --git a/stories/examples/Placeholder/Color.js b/stories/examples/Placeholder/Color.js
new file mode 100644
index 000000000..53d769c6d
--- /dev/null
+++ b/stories/examples/Placeholder/Color.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Placeholder } from 'reactstrap';
+
+function Example(args) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+}
+
+Example.args = {
+ animation: 'wave',
+};
+
+Example.argTypes = {
+ animation: {
+ control: {
+ type: 'select',
+ options: ['wave', 'glow'],
+ },
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Placeholder/Props.js b/stories/examples/Placeholder/Props.js
new file mode 100644
index 000000000..99a04658c
--- /dev/null
+++ b/stories/examples/Placeholder/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Placeholder } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+ Launch Popover (Focus)
+ {' '}
+
+ Launch Popover (Click)
+ {' '}
+
+ Launch Popover (Legacy)
+
+
+ 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.
+
+
+
+ {item.text}
+
+
+ Popover Title
+
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam.
+ Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+
+ );
+}
+
+function PopoverExampleMulti(props) {
+ return (
+ <>
+ {[
+ {
+ placement: 'top',
+ text: 'Popover on Top',
+ },
+ {
+ placement: 'bottom',
+ text: 'Popover on Bottom',
+ },
+ {
+ placement: 'left',
+ text: 'Popover on Left',
+ },
+ {
+ placement: 'right',
+ text: 'Popover on Right',
+ },
+ ].map((popover, i) => {
+ // eslint-disable-next-line react/no-array-index-key
+ return
+
+ Launch Popover
+
+
+ Popover Title
+
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam.
+ Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+
+
+ Launch Popover
+
+
+ Popover Title
+
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam.
+ Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+
Schedule Update
+
+ setIsOpen(!isOpen)}>Click me
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing 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.
+
+
+
+ );
+}
+
+function Example(props) {
+ return (
+
+
+ Open Popover
+
+
+ {({ scheduleUpdate }) => (
+
+
+
+ 25%
+
+
+ 1/2
+
+
+ You‘re almost there!
+
+
+ You did it!
+
+
+
+ Meh
+
+
+ Wow!
+
+
+ Cool
+
+
+ 20%
+
+
+ !!
+
+
+
+
1 of 5
+
+
50 of 135
+
+
75 of 111
+
+
463 of 500
+
+
+
Various (40) of 55
+
+
+ 5
+
+
+ 15
+
+
+ 10
+
+
+ 10
+
+
+
+
Plain
+
+
+
With Labels
+
+
+ Meh
+
+
+ Wow!
+
+
+ 25%
+
+
+ LOOK OUT!!
+
+
+
Stripes and Animations
+
+
+ Stripes
+
+
+ Animated Stripes
+
+
+ Plain
+
+
+
+ {component ?
+ );
+}
+
+Info.propTypes = {
+ component: PropTypes.elementType,
+};
+
+Props.propTypes = {
+ component: PropTypes.elementType,
+ components: PropTypes.arrayOf(PropTypes.elementType),
+};
+
+export default Props;
diff --git a/stories/examples/Spinner/Alignment.js b/stories/examples/Spinner/Alignment.js
new file mode 100644
index 000000000..adf565eeb
--- /dev/null
+++ b/stories/examples/Spinner/Alignment.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+
+function Example(props) {
+ return
+ Loading
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.',
+ },
+ },
+};
diff --git a/stories/examples/Spinner/Colors.js b/stories/examples/Spinner/Colors.js
new file mode 100644
index 000000000..5f68a1ac2
--- /dev/null
+++ b/stories/examples/Spinner/Colors.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Spinner } from 'reactstrap';
+import { colors } from '../options';
+
+function Example(args) {
+ return (
+ <>
+ {colors.map((color) => (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Add `bordered` for borders on all sides of the table and cells.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Borderless.js b/stories/examples/Table/Borderless.js
new file mode 100644
index 000000000..7ed335b4f
--- /dev/null
+++ b/stories/examples/Table/Borderless.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story: 'Add `borderless` for a table without borders.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Dark.js b/stories/examples/Table/Dark.js
new file mode 100644
index 000000000..6ec8c476a
--- /dev/null
+++ b/stories/examples/Table/Dark.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use `variant="dark"` to invert the colors of the table and get light text on a dark background.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Hover.js b/stories/examples/Table/Hover.js
new file mode 100644
index 000000000..4847ca659
--- /dev/null
+++ b/stories/examples/Table/Hover.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Add `hover` prop to enable a hover state on table rows within a ``.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Props.js b/stories/examples/Table/Props.js
new file mode 100644
index 000000000..14819d8b0
--- /dev/null
+++ b/stories/examples/Table/Props.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+import Props from '../Props';
+
+function Example() {
+ return
+
+
+ #
+ 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
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Responsive tables allow tables to be scrolled horizontally with ease.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Sizing.js b/stories/examples/Table/Sizing.js
new file mode 100644
index 000000000..05cd80654
--- /dev/null
+++ b/stories/examples/Table/Sizing.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use `size="sm"` to make tables compact by cutting cell padding in half.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Striped.js b/stories/examples/Table/Striped.js
new file mode 100644
index 000000000..b5a3f6f1c
--- /dev/null
+++ b/stories/examples/Table/Striped.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use `striped` prop to add zebra-striping to any table row within the ` `.',
+ },
+ },
+};
diff --git a/stories/examples/Table/Table.js b/stories/examples/Table/Table.js
new file mode 100644
index 000000000..8d833d72e
--- /dev/null
+++ b/stories/examples/Table/Table.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+
+function Example(args) {
+ return (
+
+
+
+ #
+ First Name
+ Last Name
+ Username
+
+
+
+
+ 1
+ Mark
+ Otto
+ @mdo
+
+
+ 2
+ Jacob
+ Thornton
+ @fat
+
+
+ 3
+ Larry
+ the Bird
+ @twitter
+
+
+
+ );
+}
+
+Example.args = {
+ bordered: false,
+ borderless: false,
+ dark: false,
+ hover: false,
+ responsive: false,
+ striped: false,
+};
+
+Example.argTypes = {
+ size: {
+ control: { type: 'select' },
+ options: ['', 'sm'],
+ },
+};
+
+export default Example;
diff --git a/stories/examples/Table/Variants.js b/stories/examples/Table/Variants.js
new file mode 100644
index 000000000..3e8289a46
--- /dev/null
+++ b/stories/examples/Table/Variants.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Table } from 'reactstrap';
+import { colors } from '../options';
+
+function Example(args) {
+ return (
+
+
+
+ Class
+ Heading
+ Heading
+
+
+
+ {colors.map((color) => (
+
+ {color}
+ Cell
+ Cell
+
+ ))}
+
+
+ );
+}
+
+export default Example;
+
+Example.parameters = {
+ docs: {
+ description: {
+ story:
+ 'Use contextual classes to color tables, table rows or individual cells.',
+ },
+ },
+};
diff --git a/stories/examples/Toast.js b/stories/examples/Toast.js
new file mode 100644
index 000000000..cec096b36
--- /dev/null
+++ b/stories/examples/Toast.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toast, ToastBody, ToastHeader } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Reactstrap
+
+ This is a toast on a white background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a gridded background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a primary background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a secondary background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a success background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a danger background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a warning background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on an info background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a dark background — check it out!
+
+
+
+
+
+ Reactstrap
+
+ This is a toast on a black background — check it out!
+
+
+
+
+
+ Click Me
+
+
+ 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/stories/examples/ToastHeaderIcon.js b/stories/examples/ToastHeaderIcon.js
new file mode 100644
index 000000000..529001040
--- /dev/null
+++ b/stories/examples/ToastHeaderIcon.js
@@ -0,0 +1,59 @@
+import React from 'react';
+import { Toast, ToastBody, ToastHeader, Spinner } from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+ Reactstrap
+
+ This is a toast with a primary icon — check it out!
+
+
+
+ Reactstrap
+
+ This is a toast with a secondary icon — check it out!
+
+
+
+ Reactstrap
+
+ This is a toast with a success icon — check it out!
+
+
+
+ Reactstrap
+
+ This is a toast with a danger icon — check it out!
+
+
+
+ Reactstrap
+
+ This is a toast with a warning icon — check it out!
+
+
+
+ Reactstrap
+ This is a toast with an info icon — check it out!
+
+
+ Reactstrap
+ This is a toast with a light icon — check it out!
+
+
+ Reactstrap
+ This is a toast with a dark icon — check it out!
+
+
+
+ This is a toast with a custom icon — check it out!
+
+
+
+ );
+}
+
+export default Example;
diff --git a/stories/examples/ToastProps.js b/stories/examples/ToastProps.js
new file mode 100644
index 000000000..40ca4519c
--- /dev/null
+++ b/stories/examples/ToastProps.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import { Toast, ToastBody, ToastHeader } from 'reactstrap';
+import Props from './Props';
+
+function Example() {
+ return
+
+ Sometimes you need to allow users to select text within a{' '}
+
+ tooltip
+
+ .
+
+
+ Try to select this text!
+
+
+
+ {item.text}
+
+
+ Tooltip Content!
+
+
+ );
+}
+
+TooltipItem.propTypes = {
+ item: PropTypes.object,
+ id: PropTypes.string,
+};
+
+function TooltipExampleMulti(props) {
+ return (
+ <>
+ {[
+ {
+ placement: 'top',
+ text: 'Tooltip on Top',
+ },
+ {
+ placement: 'bottom',
+ text: 'Tooltip on Bottom',
+ },
+ {
+ placement: 'left',
+ text: 'Tooltip on Left',
+ },
+ {
+ placement: 'right',
+ text: 'Tooltip on Right',
+ },
+ ].map((tooltip, i) => {
+ // eslint-disable-next-line react/no-array-index-key
+ return
+
+ Somewhere in here is a{' '}
+
+ tooltip
+
+ .
+
+
+ Hello world!
+
+
+
+ Somewhere in here is a{' '}
+
+ tooltip
+
+ .
+
+
+ Hello world!
+
+
{text}
;
+}
+
+function Example(props) {
+ return (
+
+ Click me
+
+ {({ scheduleUpdate }) => (
+
+
+ );
+}
+
+TooltipContent.propTypes = {
+ scheduleUpdate: PropTypes.func,
+};
+
+export default Example;
diff --git a/stories/examples/UncontrolledAccordion.js b/stories/examples/UncontrolledAccordion.js
new file mode 100644
index 000000000..8260d4942
--- /dev/null
+++ b/stories/examples/UncontrolledAccordion.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import {
+ UncontrolledAccordion,
+ AccordionBody,
+ AccordionHeader,
+ AccordionItem,
+} from 'reactstrap';
+
+function Example(props) {
+ return (
+
+
+
+ Accordion Item 1
+
+ This is the first item‘s accordion body.
+ You can modify any of this with custom CSS or overriding our default
+ variables. It‘s also worth noting that just about any HTML can
+ go within the .accordion-body, though the transition
+ does limit overflow.
+
+
+
+ Accordion Item 2
+
+ This is the second item‘s accordion body.
+ You can modify any of this with custom CSS or overriding our default
+ variables. It‘s also worth noting that just about any HTML can
+ go within the .accordion-body, though the transition
+ does limit overflow.
+
+
+
+ Accordion Item 3
+
+ This is the third item‘s accordion body.
+ You can modify any of this with custom CSS or overriding our default
+ variables. It‘s also worth noting that just about any HTML can
+ go within the .accordion-body, though the transition
+ does limit overflow.
+
+
+
+
+
+
+
+
Reactstrap Themes & Templates
+
+ A collection of free and premium React templates and themes powered by
+ Reactstrap
+
+
+ {premiumThemes.map((company) => (
+
+ {company.creator.name}
+ {company.creator.tagLine}
+
+ {company.products.map((product) => {
+ return (
+
+
+
+ {product.tagLine}
+
+
+
+
+
+
+
+ );
+ })}
+ {company.products.length % 2 !== 0 && (
+
+ More themes will be added soon !
+
+
+ )}
+
+
+
+ See more themes from {company.creator.name}
+
+
+
+ ))}
+
{
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ flush?: boolean;
+ innerRef?: React.Ref;
+ open: string | string[];
+ toggle: (targetId: string) => void;
+}
+
+export interface UncontrolledAccordionProps extends Omit {
+ defaultOpen?: string | string[];
+ stayOpen?: boolean;
+}
+
+declare class Accordion extends React.Component {}
+export default Accordion;
diff --git a/types/lib/AccordionBody.d.ts b/types/lib/AccordionBody.d.ts
new file mode 100644
index 000000000..bad2b326d
--- /dev/null
+++ b/types/lib/AccordionBody.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface AccordionBodyProps extends React.HTMLAttributes {
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ innerRef?: React.Ref;
+ accordionId: string;
+}
+
+declare class AccordionBody extends React.Component {}
+export default AccordionBody;
diff --git a/types/lib/AccordionHeader.d.ts b/types/lib/AccordionHeader.d.ts
new file mode 100644
index 000000000..d390a5fd4
--- /dev/null
+++ b/types/lib/AccordionHeader.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface AccordionHeaderProps extends React.HTMLAttributes {
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ innerRef?: React.Ref;
+ targetId: string;
+}
+
+declare class AccordionHeader extends React.Component {}
+export default AccordionHeader;
diff --git a/types/lib/AccordionItem.d.ts b/types/lib/AccordionItem.d.ts
new file mode 100644
index 000000000..874970943
--- /dev/null
+++ b/types/lib/AccordionItem.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface AccordionItemProps extends React.HTMLAttributes {
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ innerRef?: React.Ref;
+}
+
+declare class AccordionItem extends React.Component {}
+export default AccordionItem;
diff --git a/types/lib/Alert.d.ts b/types/lib/Alert.d.ts
new file mode 100644
index 000000000..6840dcd18
--- /dev/null
+++ b/types/lib/Alert.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+import { FadeProps } from './Fade';
+
+export interface UncontrolledAlertProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ closeClassName?: string;
+ closeAriaLabel?: string;
+ cssModule?: CSSModule;
+ color?: string;
+ fade?: boolean;
+ tag?: React.ElementType;
+ transition?: FadeProps;
+ innerRef?: React.Ref;
+}
+export interface AlertProps extends UncontrolledAlertProps {
+ isOpen?: boolean;
+ toggle?: React.MouseEventHandler;
+}
+
+declare class Alert extends React.Component {}
+export default Alert;
diff --git a/types/lib/Badge.d.ts b/types/lib/Badge.d.ts
new file mode 100644
index 000000000..f74ea4399
--- /dev/null
+++ b/types/lib/Badge.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface BadgeProps extends React.HTMLAttributes {
+ [key: string]: any;
+ color?: string;
+ pill?: boolean;
+ tag?: React.ElementType;
+ innerRef?: React.Ref;
+ cssModule?: CSSModule;
+}
+
+declare class Badge extends React.Component {}
+export default Badge;
diff --git a/types/lib/Breadcrumb.d.ts b/types/lib/Breadcrumb.d.ts
new file mode 100644
index 000000000..70f13ffcf
--- /dev/null
+++ b/types/lib/Breadcrumb.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface BreadcrumbProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ listTag?: React.ElementType;
+ listClassName?: string;
+ cssModule?: CSSModule;
+}
+
+declare class Breadcrumb extends React.Component {}
+export default Breadcrumb;
diff --git a/types/lib/BreadcrumbItem.d.ts b/types/lib/BreadcrumbItem.d.ts
new file mode 100644
index 000000000..92076c8fc
--- /dev/null
+++ b/types/lib/BreadcrumbItem.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface BreadcrumbItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ active?: boolean;
+ cssModule?: CSSModule;
+}
+
+declare class BreadcrumbItem extends React.Component {}
+export default BreadcrumbItem;
diff --git a/types/lib/Button.d.ts b/types/lib/Button.d.ts
new file mode 100644
index 000000000..0bdfd594e
--- /dev/null
+++ b/types/lib/Button.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes {
+ [key: string]: any;
+ outline?: boolean;
+ active?: boolean;
+ block?: boolean;
+ color?: string;
+ tag?: React.ElementType;
+ innerRef?: React.Ref;
+ size?: string;
+ cssModule?: CSSModule;
+ close?: boolean;
+}
+
+declare class Button extends React.Component {}
+export default Button;
diff --git a/types/lib/ButtonDropdown.d.ts b/types/lib/ButtonDropdown.d.ts
new file mode 100644
index 000000000..bcc16d862
--- /dev/null
+++ b/types/lib/ButtonDropdown.d.ts
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { UncontrolledDropdownProps, DropdownProps } from './Dropdown';
+export {
+ UncontrolledDropdownProps as UncontrolledButtonDropdownProps,
+ DropdownProps as ButtonDropdownProps,
+};
+
+declare class ButtonDropdown extends React.Component {}
+export default ButtonDropdown;
diff --git a/types/lib/ButtonGroup.d.ts b/types/lib/ButtonGroup.d.ts
new file mode 100644
index 000000000..e33a890a0
--- /dev/null
+++ b/types/lib/ButtonGroup.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ButtonGroupProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ size?: string;
+ vertical?: boolean;
+}
+
+declare class ButtonGroup extends React.Component {}
+export default ButtonGroup;
diff --git a/types/lib/ButtonToggle.d.ts b/types/lib/ButtonToggle.d.ts
new file mode 100644
index 000000000..f9b631432
--- /dev/null
+++ b/types/lib/ButtonToggle.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+
+type Omit = Pick>;
+
+export interface ButtonToggleProps
+ extends Omit, 'defaultValue'> {
+ [key: string]: any;
+ defaultValue?: boolean;
+}
+
+declare class ButtonToggle extends React.Component {}
+export default ButtonToggle;
diff --git a/types/lib/ButtonToolbar.d.ts b/types/lib/ButtonToolbar.d.ts
new file mode 100644
index 000000000..42c9caec0
--- /dev/null
+++ b/types/lib/ButtonToolbar.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ButtonToolbarProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ButtonToolbar extends React.Component {}
+export default ButtonToolbar;
diff --git a/types/lib/Card.d.ts b/types/lib/Card.d.ts
new file mode 100644
index 000000000..76587356d
--- /dev/null
+++ b/types/lib/Card.d.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ inverse?: boolean;
+ color?: string;
+ body?: boolean;
+ outline?: boolean;
+ cssModule?: CSSModule;
+ innerRef?: React.Ref;
+}
+
+declare class Card extends React.Component {}
+export default Card;
diff --git a/types/lib/CardBody.d.ts b/types/lib/CardBody.d.ts
new file mode 100644
index 000000000..cbd026c1a
--- /dev/null
+++ b/types/lib/CardBody.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardBodyProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ innerRef?: React.Ref;
+}
+
+declare class CardBody extends React.Component {}
+export default CardBody;
diff --git a/types/lib/CardColumns.d.ts b/types/lib/CardColumns.d.ts
new file mode 100644
index 000000000..4eac907e4
--- /dev/null
+++ b/types/lib/CardColumns.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardColumnsProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardColumns extends React.Component {}
+export default CardColumns;
diff --git a/types/lib/CardDeck.d.ts b/types/lib/CardDeck.d.ts
new file mode 100644
index 000000000..d670345b1
--- /dev/null
+++ b/types/lib/CardDeck.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardDeckProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardDeck extends React.Component {}
+export default CardDeck;
diff --git a/types/lib/CardFooter.d.ts b/types/lib/CardFooter.d.ts
new file mode 100644
index 000000000..22d9f5950
--- /dev/null
+++ b/types/lib/CardFooter.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardFooterProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardFooter extends React.Component {}
+export default CardFooter;
diff --git a/types/lib/CardGroup.d.ts b/types/lib/CardGroup.d.ts
new file mode 100644
index 000000000..a0ca7a295
--- /dev/null
+++ b/types/lib/CardGroup.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardGroupProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardGroup extends React.Component {}
+export default CardGroup;
diff --git a/types/lib/CardHeader.d.ts b/types/lib/CardHeader.d.ts
new file mode 100644
index 000000000..5f5cae4ea
--- /dev/null
+++ b/types/lib/CardHeader.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardHeaderProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardHeader extends React.Component {}
+export default CardHeader;
diff --git a/types/lib/CardImg.d.ts b/types/lib/CardImg.d.ts
new file mode 100644
index 000000000..c6cc47cde
--- /dev/null
+++ b/types/lib/CardImg.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardImgProps
+ extends React.ImgHTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ top?: boolean;
+ bottom?: boolean;
+ cssModule?: CSSModule;
+}
+
+declare class CardImg extends React.Component {}
+export default CardImg;
diff --git a/types/lib/CardImgOverlay.d.ts b/types/lib/CardImgOverlay.d.ts
new file mode 100644
index 000000000..c5baddf65
--- /dev/null
+++ b/types/lib/CardImgOverlay.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardImgOverlayProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardImgOverlay extends React.Component {}
+export default CardImgOverlay;
diff --git a/types/lib/CardLink.d.ts b/types/lib/CardLink.d.ts
new file mode 100644
index 000000000..b36805143
--- /dev/null
+++ b/types/lib/CardLink.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardLinkProps
+ extends React.AnchorHTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ innerRef?: React.Ref;
+ cssModule?: CSSModule;
+}
+
+declare class CardLink extends React.Component {}
+export default CardLink;
diff --git a/types/lib/CardSubtitle.d.ts b/types/lib/CardSubtitle.d.ts
new file mode 100644
index 000000000..72200dbe7
--- /dev/null
+++ b/types/lib/CardSubtitle.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardSubtitleProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardSubtitle extends React.Component {}
+export default CardSubtitle;
diff --git a/types/lib/CardText.d.ts b/types/lib/CardText.d.ts
new file mode 100644
index 000000000..7670d3348
--- /dev/null
+++ b/types/lib/CardText.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardTextProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardText extends React.Component {}
+export default CardText;
diff --git a/types/lib/CardTitle.d.ts b/types/lib/CardTitle.d.ts
new file mode 100644
index 000000000..6e32bc0fc
--- /dev/null
+++ b/types/lib/CardTitle.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CardTitleProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class CardTitle extends React.Component {}
+export default CardTitle;
diff --git a/types/lib/Carousel.d.ts b/types/lib/Carousel.d.ts
new file mode 100644
index 000000000..b8ef1dbfb
--- /dev/null
+++ b/types/lib/Carousel.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+interface CommonCarouselProps extends React.HTMLAttributes {
+ [key: string]: any;
+ activeIndex?: number;
+ keyboard?: boolean;
+ pause?: 'hover' | false;
+ ride?: 'carousel';
+ interval?: number | string | boolean;
+ mouseEnter?: () => void;
+ mouseExit?: () => void;
+ slide?: boolean;
+ dark?: boolean;
+ fade?: boolean;
+ cssModule?: CSSModule;
+ enableTouch?: boolean;
+}
+
+export interface CarouselProps extends CommonCarouselProps {
+ next: () => void;
+ previous: () => void;
+}
+
+export interface UncontrolledCarouselProps extends CommonCarouselProps {
+ items: any[];
+ next?: () => void;
+ previous?: () => void;
+ controls?: boolean;
+ indicators?: boolean;
+ autoPlay?: boolean;
+}
+
+declare class Carousel extends React.Component {}
+export default Carousel;
diff --git a/types/lib/CarouselCaption.d.ts b/types/lib/CarouselCaption.d.ts
new file mode 100644
index 000000000..5bddd0217
--- /dev/null
+++ b/types/lib/CarouselCaption.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CarouselCaptionProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ captionHeader?: React.ReactNode;
+ captionText: React.ReactNode;
+ cssModule?: CSSModule;
+}
+
+declare class CarouselCaption extends React.Component {}
+export default CarouselCaption;
diff --git a/types/lib/CarouselControl.d.ts b/types/lib/CarouselControl.d.ts
new file mode 100644
index 000000000..e57a5ce8a
--- /dev/null
+++ b/types/lib/CarouselControl.d.ts
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CarouselControlProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ direction: 'prev' | 'next';
+ onClickHandler: () => void;
+ cssModule?: CSSModule;
+ directionText?: string;
+}
+
+export default class CarouselControl extends React.Component<
+ CarouselControlProps
+> {}
diff --git a/types/lib/CarouselIndicators.d.ts b/types/lib/CarouselIndicators.d.ts
new file mode 100644
index 000000000..c2265cdb8
--- /dev/null
+++ b/types/lib/CarouselIndicators.d.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CarouselIndicatorsProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ items: object[];
+ activeIndex: number;
+ cssModule?: CSSModule;
+ onClickHandler: (idx: number) => void;
+}
+
+declare class CarouselIndicators extends React.Component<
+ CarouselIndicatorsProps
+> {}
+export default CarouselIndicators;
diff --git a/types/lib/CarouselItem.d.ts b/types/lib/CarouselItem.d.ts
new file mode 100644
index 000000000..221869315
--- /dev/null
+++ b/types/lib/CarouselItem.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CarouselItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ in?: boolean;
+ cssModule?: CSSModule;
+ slide?: boolean;
+ onEnter?: () => void;
+ onEntering?: () => void;
+ onEntered?: () => void;
+ onExit?: () => void;
+ onExiting?: () => void;
+ onExited?: () => void;
+}
+
+declare class CarouselItem extends React.Component {}
+export default CarouselItem;
diff --git a/types/lib/CloseButton.d.ts b/types/lib/CloseButton.d.ts
new file mode 100644
index 000000000..298f3da6f
--- /dev/null
+++ b/types/lib/CloseButton.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CloseButtonProps
+ extends React.ButtonHTMLAttributes {
+ active?: boolean;
+ variant?: 'white' | 'black';
+ cssModule?: CSSModule;
+}
+
+declare class CloseButton extends React.Component {}
+export default CloseButton;
\ No newline at end of file
diff --git a/types/lib/Col.d.ts b/types/lib/Col.d.ts
new file mode 100644
index 000000000..6ae009796
--- /dev/null
+++ b/types/lib/Col.d.ts
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export type ColumnProps =
+ | string
+ | boolean
+ | number
+ | {
+ size?: boolean | number | string;
+ offset?: string | number;
+ order?: string | number;
+ };
+
+export interface ColProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ xs?: ColumnProps;
+ sm?: ColumnProps;
+ md?: ColumnProps;
+ lg?: ColumnProps;
+ xl?: ColumnProps;
+ xxl?: ColumnProps;
+
+ // custom widths
+ widths?: string[];
+}
+
+declare class Col extends React.Component {}
+export default Col;
diff --git a/types/lib/Collapse.d.ts b/types/lib/Collapse.d.ts
new file mode 100644
index 000000000..ca5f73eb8
--- /dev/null
+++ b/types/lib/Collapse.d.ts
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface CollapseProps extends React.HTMLAttributes {
+ [key: string]: any;
+ isOpen?: boolean;
+ cssModule?: CSSModule;
+ tag?: React.ElementType;
+ horizontal?: boolean;
+ navbar?: boolean;
+ delay?: {
+ show: number;
+ hide: number;
+ };
+ onOpened?: () => void;
+ onClosed?: () => void;
+ onEntering?: () => void;
+ onEntered?: () => void;
+ onExit?: () => void;
+ onExiting?: () => void;
+ onExited?: () => void;
+ innerRef?: React.Ref;
+}
+
+export interface UncontrolledCollapseProps extends CollapseProps {
+ defaultOpen?: boolean;
+ toggler: string;
+ toggleEvents?: string[];
+}
+
+declare class Collapse extends React.Component {}
+export default Collapse;
diff --git a/types/lib/Container.d.ts b/types/lib/Container.d.ts
new file mode 100644
index 000000000..469df2385
--- /dev/null
+++ b/types/lib/Container.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ContainerProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ fluid?: boolean | string;
+ cssModule?: CSSModule;
+}
+
+declare class Container extends React.Component {}
+export default Container;
diff --git a/types/lib/Dropdown.d.ts b/types/lib/Dropdown.d.ts
new file mode 100644
index 000000000..56b0274d9
--- /dev/null
+++ b/types/lib/Dropdown.d.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export type Direction = 'up' | 'down' | 'start' | 'end';
+
+export interface DropdownProps extends React.HTMLAttributes {
+ [key: string]: any;
+ a11y?: boolean;
+ disabled?: boolean;
+ direction?: Direction;
+ group?: boolean;
+ isOpen?: boolean;
+ nav?: boolean;
+ active?: boolean;
+ addonType?: boolean | 'prepend' | 'append';
+ size?: string;
+ tag?: React.ElementType;
+ toggle?: React.KeyboardEventHandler | React.MouseEventHandler;
+ cssModule?: CSSModule;
+ inNavbar?: boolean;
+ setActiveFromChild?: boolean;
+ menuRole?: boolean | string;
+}
+
+export interface UncontrolledDropdownProps extends DropdownProps {
+ defaultOpen?: boolean;
+ onToggle?: (
+ event: React.KeyboardEvent | React.MouseEvent,
+ isOpen: boolean
+ ) => void;
+}
+
+declare class Dropdown extends React.Component {}
+
+export default Dropdown;
diff --git a/types/lib/DropdownItem.d.ts b/types/lib/DropdownItem.d.ts
new file mode 100644
index 000000000..b6ce28060
--- /dev/null
+++ b/types/lib/DropdownItem.d.ts
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface DropdownItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ active?: boolean;
+ disabled?: boolean;
+ divider?: boolean;
+ tag?: React.ElementType;
+ header?: boolean;
+ cssModule?: CSSModule;
+ href?: string;
+ toggle?: boolean;
+ text?: boolean;
+}
+
+declare class DropdownItem extends React.Component {}
+export default DropdownItem;
diff --git a/types/lib/DropdownMenu.d.ts b/types/lib/DropdownMenu.d.ts
new file mode 100644
index 000000000..c1a20da69
--- /dev/null
+++ b/types/lib/DropdownMenu.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import type { Modifier } from '@popperjs/core';
+import { CSSModule } from './utils';
+
+export interface DropdownMenuProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ dark?: boolean;
+ right?: boolean;
+ flip?: boolean;
+ modifiers?: Modifier[];
+ cssModule?: CSSModule;
+ persist?: boolean;
+ strategy?: string;
+ container?: string | HTMLElement | React.RefObject;
+ updateOnSelect?: boolean;
+}
+
+declare class DropdownMenu extends React.Component {}
+export default DropdownMenu;
diff --git a/types/lib/DropdownToggle.d.ts b/types/lib/DropdownToggle.d.ts
new file mode 100644
index 000000000..d6a0876e1
--- /dev/null
+++ b/types/lib/DropdownToggle.d.ts
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface DropdownToggleProps extends React.HTMLAttributes {
+ [key: string]: any;
+ caret?: boolean;
+ color?: string;
+ cssModule?: CSSModule;
+ disabled?: boolean;
+ outline?: boolean;
+ 'data-toggle'?: string;
+ 'aria-haspopup'?: boolean;
+ split?: boolean;
+ tag?: React.ElementType;
+ nav?: boolean;
+ size?: string;
+}
+
+declare class DropdownToggle extends React.Component {}
+export default DropdownToggle;
diff --git a/types/lib/Fade.d.ts b/types/lib/Fade.d.ts
new file mode 100644
index 000000000..39a12ee91
--- /dev/null
+++ b/types/lib/Fade.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface FadeProps extends React.HTMLAttributes {
+ [key: string]: any;
+ in?: boolean;
+ baseClass?: string;
+ baseClassIn?: string;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ transitionAppearTimeout?: number;
+ transitionEnterTimeout?: number;
+ transitionLeaveTimeout?: number;
+ transitionAppear?: boolean;
+ transitionEnter?: boolean;
+ transitionLeave?: boolean;
+ onLeave?: () => void;
+ onEnter?: () => void;
+ innerRef?: React.Ref;
+}
+
+declare class Fade extends React.Component {}
+export default Fade;
diff --git a/types/lib/Form.d.ts b/types/lib/Form.d.ts
new file mode 100644
index 000000000..78b2e15cd
--- /dev/null
+++ b/types/lib/Form.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface FormProps extends React.FormHTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ innerRef?: React.Ref;
+ cssModule?: CSSModule;
+}
+
+declare class Form extends React.Component {}
+export default Form;
diff --git a/types/lib/FormFeedback.d.ts b/types/lib/FormFeedback.d.ts
new file mode 100644
index 000000000..6d18441e0
--- /dev/null
+++ b/types/lib/FormFeedback.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface FormFeedbackProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: string;
+ cssModule?: CSSModule;
+ valid?: boolean;
+ tooltip?: boolean;
+}
+
+declare class FormFeedback extends React.Component {}
+export default FormFeedback;
diff --git a/types/lib/FormGroup.d.ts b/types/lib/FormGroup.d.ts
new file mode 100644
index 000000000..0b7feeb15
--- /dev/null
+++ b/types/lib/FormGroup.d.ts
@@ -0,0 +1,19 @@
+import * as React from "react";
+
+import { CSSModule } from "./utils";
+
+export interface FormGroupProps extends React.HTMLAttributes {
+ [key: string]: any;
+ row?: boolean;
+ check?: boolean;
+ switch?: boolean;
+ inline?: boolean;
+ noMargin?: boolean;
+ floating?: boolean;
+ disabled?: boolean;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class FormGroup extends React.Component {}
+export default FormGroup;
diff --git a/types/lib/FormText.d.ts b/types/lib/FormText.d.ts
new file mode 100644
index 000000000..e94411bf2
--- /dev/null
+++ b/types/lib/FormText.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface FormTextProps extends React.HTMLAttributes {
+ [key: string]: any;
+ inline?: boolean;
+ tag?: React.ElementType;
+ color?: string;
+ cssModule?: CSSModule;
+}
+
+declare class FormText extends React.Component {}
+export default FormText;
diff --git a/types/lib/Input.d.ts b/types/lib/Input.d.ts
new file mode 100644
index 000000000..3538acc81
--- /dev/null
+++ b/types/lib/Input.d.ts
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export type InputType =
+ | 'text'
+ | 'email'
+ | 'select'
+ | 'file'
+ | 'radio'
+ | 'checkbox'
+ | 'switch'
+ | 'textarea'
+ | 'button'
+ | 'reset'
+ | 'submit'
+ | 'date'
+ | 'datetime-local'
+ | 'hidden'
+ | 'image'
+ | 'month'
+ | 'number'
+ | 'range'
+ | 'search'
+ | 'tel'
+ | 'url'
+ | 'week'
+ | 'password'
+ | 'datetime'
+ | 'time'
+ | 'color';
+
+export interface InputProps
+ extends React.InputHTMLAttributes {
+ [key: string]: any;
+ type?: InputType;
+ bsSize?: 'lg' | 'sm';
+ valid?: boolean;
+ invalid?: boolean;
+ tag?: React.ElementType;
+ innerRef?: React.Ref;
+ plaintext?: boolean;
+ addon?: boolean;
+ cssModule?: CSSModule;
+}
+
+declare class Input extends React.Component {}
+export default Input;
diff --git a/types/lib/InputGroup.d.ts b/types/lib/InputGroup.d.ts
new file mode 100644
index 000000000..30776dffd
--- /dev/null
+++ b/types/lib/InputGroup.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface InputGroupProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ size?: string;
+ cssModule?: CSSModule;
+}
+
+declare class InputGroup extends React.Component {}
+export default InputGroup;
diff --git a/types/lib/InputGroupText.d.ts b/types/lib/InputGroupText.d.ts
new file mode 100644
index 000000000..3184ea386
--- /dev/null
+++ b/types/lib/InputGroupText.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface InputGroupTextProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class InputGroupText extends React.Component {}
+export default InputGroupText;
diff --git a/types/lib/Label.d.ts b/types/lib/Label.d.ts
new file mode 100644
index 000000000..61aa02996
--- /dev/null
+++ b/types/lib/Label.d.ts
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+import { ColumnProps } from './Col';
+
+export interface LabelProps
+ extends React.LabelHTMLAttributes {
+ [key: string]: any;
+ hidden?: boolean;
+ check?: boolean;
+ size?: string;
+ disabled?: boolean;
+ for?: string;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ xs?: ColumnProps;
+ sm?: ColumnProps;
+ md?: ColumnProps;
+ lg?: ColumnProps;
+ xl?: ColumnProps;
+ xxl?: ColumnProps;
+
+ // custom widths
+ widths?: string[];
+}
+
+declare class Label extends React.Component {}
+export default Label;
diff --git a/types/lib/List.d.ts b/types/lib/List.d.ts
new file mode 100644
index 000000000..6a6e21e34
--- /dev/null
+++ b/types/lib/List.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ type?: string;
+}
+
+declare class List extends React.Component {}
+export default List;
diff --git a/types/lib/ListGroup.d.ts b/types/lib/ListGroup.d.ts
new file mode 100644
index 000000000..06b461fdf
--- /dev/null
+++ b/types/lib/ListGroup.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListGroupProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ flush?: boolean;
+ horizontal?: boolean | string;
+ numbered?: boolean;
+ cssModule?: CSSModule;
+}
+
+declare class ListGroup extends React.Component {}
+export default ListGroup;
diff --git a/types/lib/ListGroupItem.d.ts b/types/lib/ListGroupItem.d.ts
new file mode 100644
index 000000000..a6097c658
--- /dev/null
+++ b/types/lib/ListGroupItem.d.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListGroupItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ active?: boolean;
+ disabled?: boolean;
+ color?: string;
+ action?: boolean;
+ cssModule?: CSSModule;
+ href?: string;
+}
+
+declare class ListGroupItem extends React.Component {}
+export default ListGroupItem;
diff --git a/types/lib/ListGroupItemHeading.d.ts b/types/lib/ListGroupItemHeading.d.ts
new file mode 100644
index 000000000..41f68420c
--- /dev/null
+++ b/types/lib/ListGroupItemHeading.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListGroupItemHeadingProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ListGroupItemHeading extends React.Component<
+ ListGroupItemHeadingProps
+> {}
+export default ListGroupItemHeading;
diff --git a/types/lib/ListGroupItemText.d.ts b/types/lib/ListGroupItemText.d.ts
new file mode 100644
index 000000000..546b68304
--- /dev/null
+++ b/types/lib/ListGroupItemText.d.ts
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListGroupItemTextProps
+ extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ListGroupItemText extends React.Component<
+ ListGroupItemTextProps
+> {}
+export default ListGroupItemText;
diff --git a/types/lib/ListInlineItem.d.ts b/types/lib/ListInlineItem.d.ts
new file mode 100644
index 000000000..e1d3804c8
--- /dev/null
+++ b/types/lib/ListInlineItem.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ListInlineItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ListInlineItem extends React.Component {}
+export default ListInlineItem;
diff --git a/types/lib/Media.d.ts b/types/lib/Media.d.ts
new file mode 100644
index 000000000..410fc844c
--- /dev/null
+++ b/types/lib/Media.d.ts
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface MediaProps extends React.HTMLAttributes {
+ [key: string]: any;
+ body?: boolean;
+ bottom?: boolean;
+ cssModule?: CSSModule;
+ heading?: boolean;
+ left?: boolean;
+ list?: boolean;
+ middle?: boolean;
+ object?: boolean;
+ right?: boolean;
+ tag?: React.ElementType;
+ top?: boolean;
+ src?: string;
+ href?: string;
+ alt?: string;
+}
+
+declare class Media extends React.Component {}
+export default Media;
diff --git a/types/lib/Modal.d.ts b/types/lib/Modal.d.ts
new file mode 100644
index 000000000..6b785f917
--- /dev/null
+++ b/types/lib/Modal.d.ts
@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+import { FadeProps } from './Fade';
+
+export interface ModalProps extends React.HTMLAttributes {
+ [key: string]: any;
+ isOpen?: boolean;
+ autoFocus?: boolean;
+ size?: string;
+ toggle?: React.KeyboardEventHandler | React.MouseEventHandler;
+ keyboard?: boolean;
+ backdrop?: boolean | 'static';
+ scrollable?: boolean;
+ onEnter?: () => void;
+ onExit?: () => void;
+ onOpened?: () => void;
+ onClosed?: () => void;
+ cssModule?: CSSModule;
+ wrapClassName?: string;
+ modalClassName?: string;
+ backdropClassName?: string;
+ contentClassName?: string;
+ zIndex?: number | string;
+ fade?: boolean;
+ backdropTransition?: FadeProps;
+ modalTransition?: FadeProps;
+ centered?: boolean;
+ fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+ external?: React.ReactNode;
+ labelledBy?: string;
+ unmountOnClose?: boolean;
+ returnFocusAfterClose?: boolean;
+ container?: string | HTMLElement | React.RefObject;
+ innerRef?: React.Ref;
+ trapFocus?: boolean;
+}
+
+declare class Modal extends React.Component {}
+export default Modal;
diff --git a/types/lib/ModalBody.d.ts b/types/lib/ModalBody.d.ts
new file mode 100644
index 000000000..002b3437d
--- /dev/null
+++ b/types/lib/ModalBody.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ModalBodyProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ModalBody extends React.Component {}
+export default ModalBody;
diff --git a/types/lib/ModalFooter.d.ts b/types/lib/ModalFooter.d.ts
new file mode 100644
index 000000000..433bc6f8e
--- /dev/null
+++ b/types/lib/ModalFooter.d.ts
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ModalFooterProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class ModalFooter extends React.Component {}
+export default ModalFooter;
diff --git a/types/lib/ModalHeader.d.ts b/types/lib/ModalHeader.d.ts
new file mode 100644
index 000000000..dfc074b18
--- /dev/null
+++ b/types/lib/ModalHeader.d.ts
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface ModalHeaderProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+ wrapTag?: React.ElementType;
+ toggle?: React.MouseEventHandler;
+}
+
+declare class ModalHeader extends React.Component {}
+export default ModalHeader;
diff --git a/types/lib/Nav.d.ts b/types/lib/Nav.d.ts
new file mode 100644
index 000000000..da81be59d
--- /dev/null
+++ b/types/lib/Nav.d.ts
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface NavProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tabs?: boolean;
+ pills?: boolean;
+ vertical?: boolean | string;
+ horizontal?: string;
+ justified?: boolean;
+ fill?: boolean;
+ navbar?: boolean;
+ card?: boolean;
+ tag?: React.ElementType;
+ cssModule?: CSSModule;
+}
+
+declare class Nav extends React.Component {}
+export default Nav;
diff --git a/types/lib/NavItem.d.ts b/types/lib/NavItem.d.ts
new file mode 100644
index 000000000..facad430d
--- /dev/null
+++ b/types/lib/NavItem.d.ts
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { CSSModule } from './utils';
+
+export interface NavItemProps extends React.HTMLAttributes {
+ [key: string]: any;
+ tag?: React.ElementType;
+ active?: boolean;
+ cssModule?: CSSModule;
+}
+
+declare class NavItem extends React.Component 
- 
-