\n Container with overflow: hidden.\n \n Dropdown\n \n \n setLastClicked(1)}>Action 1 \n setLastClicked(2)}>Action 2 \n setLastClicked(3)}>Action 3 \n \n \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React, { useState } from 'react';\\nimport { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n const [dropdownOpen, setDropdownOpen] = useState(false);\\n\\n const toggle = () => setDropdownOpen(prevState => !prevState);\\n\\n return (\\n \\n Container with overflow: hidden.\\n \\n Dropdown\\n \\n \\n setLastClicked(1)}>Action 1 \\n setLastClicked(2)}>Action 2 \\n setLastClicked(3)}>Action 3 \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport { Alert } from 'reactstrap';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport FadeExample from '../examples/Fade';\nconst FadeExampleSource = require('!!raw-loader!../examples/Fade');\n\nexport default class FadePage extends React.Component {\n render() {\n return (\n \n
\n
Tooltips are built with https://popper.js.org/ via https://github.com/popperjs/react-popper .
\n
\n
\n
\n \n {TooltipExampleSource}\n \n \n
Properties \n
\n \n{`Tooltip.propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n // space separated list of triggers (e.g. \"click hover focus\")\n trigger: PropTypes.string,\n // boundaries for popper, can be scrollParent, window, viewport, or any DOM element\n boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),\n // boolean to control the state of the tooltip\n isOpen: PropTypes.bool,\n hideArrow: PropTypes.bool,\n // callback for toggling isOpen in the controlling component. It will receive an object with info about the event that triggered it\n toggle: PropTypes.func,\n // target element or element ID, popover is attached to this element\n target: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.func,\n DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)\n ]).isRequired,\n // Where to inject the popper DOM node, default to body\n container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),\n // optionally override show/hide delays - default { show: 0, hide: 50 }\n delay: PropTypes.oneOfType([\n PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),\n PropTypes.number\n ]),\n className: PropTypes.string,\n // Apply class to the popper component\n popperClassName: PropTypes.string,\n // Apply class to the inner-tooltip\n innerClassName: PropTypes.string,\n // Apply class to the arrow-tooltip ('arrow' by default)\n arrowClassName: PropTypes.string,\n // optionally hide tooltip when hovering over tooltip content - default true\n autohide: PropTypes.bool,\n // convenience attachments for popover\n placement: PropTypes.oneOf([\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'top-start',\n 'top-end',\n 'right',\n 'right-start',\n 'right-end',\n 'bottom',\n 'bottom-start',\n 'bottom-end',\n 'left',\n 'left-start',\n 'left-end',\n ]),\n // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers\n modifiers: PropTypes.object,\n // Whether the element the tooltip is pointing to has \"position: fixed\" styling. This is passed to Popper.js and\n // will make the tooltip itself have \"position: fixed\" as well\n positionFixed: PropTypes.bool,\n offset: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.number\n ]),\n // Custom ref handler that will be assigned to the \"ref\" of the wrapping the tooltip elements\n innerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.string,\n PropTypes.object\n ]),\n\n // Whether to show/hide the popover with a fade effect\n // (default: true)\n fade: PropTypes.bool,\n\n // Whether to flip the direction of the popover if too close to\n // the container edge\n // (default: true)\n flip: PropTypes.bool,\n}`}\n \n \n
Tooltip Disable Autohide \n
\n
\n
\n \n {TooltipExampleAutoHideSource}\n \n \n
Tooltips List \n
\n
\n
\n \n {TooltipExampleMultiSource}\n \n \n
Uncontrolled Tooltip \n
\n For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledTooltip does not require isOpen nor toggle props to work.\n
\n
\n
\n
\n \n {TooltipExampleUncontrolledSource}\n \n \n
Repositioning Tooltips \n
\n If you need to reposition a tooltip due to content changes or target placement changes, use\n the scheduleUpdate function to manually reposition it. This function is exposed\n as a render prop for children.\n
\n
\n
\n
\n \n {TooltipScheduleUpdateExampleSource}\n \n \n
\n
Somewhere in here is a tooltip .
\n
\n Hello world!\n \n
\n
Sometimes you need to allow users to select text within a tooltip .
\n
\n Try to select this text!\n \n
\n \n {item.text}\n \n \n Tooltip Content!\n \n \n );\n};\n\nconst TooltipExampleMulti = props => {\n return (\n <>\n {[\n {\n placement: \"top\",\n text: \"Top\"\n },\n {\n placement: \"bottom\",\n text: \"Bottom\"\n },\n {\n placement: \"left\",\n text: \"Left\"\n },\n {\n placement: \"right\",\n text: \"Right\"\n }\n ].map((tooltip, i) => {\n return \n
Somewhere in here is a tooltip .
\n
\n Hello world!\n \n
\n Click me \n \n {({ scheduleUpdate }) => (\n \n
\n );\n}\n\nexport default Example;","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\nimport React, { useState } from 'react';\\nimport { Tooltip } from 'reactstrap';\\n\\nconst Example = (props) => {\\n const [tooltipOpen, setTooltipOpen] = useState(false);\\n\\n const toggle = () => setTooltipOpen(!tooltipOpen);\\n\\n return (\\n \\n
Somewhere in here is a tooltip .
\\n
\\n Hello world!\\n \\n
\\n
Sometimes you need to allow users to select text within a tooltip .
\\n
\\n Try to select this text!\\n \\n
\\n \\n {item.text}\\n \\n \\n Tooltip Content!\\n \\n \\n );\\n};\\n\\nconst TooltipExampleMulti = props => {\\n return (\\n <>\\n {[\\n {\\n placement: \\\"top\\\",\\n text: \\\"Top\\\"\\n },\\n {\\n placement: \\\"bottom\\\",\\n text: \\\"Bottom\\\"\\n },\\n {\\n placement: \\\"left\\\",\\n text: \\\"Left\\\"\\n },\\n {\\n placement: \\\"right\\\",\\n text: \\\"Right\\\"\\n }\\n ].map((tooltip, i) => {\\n return \\n
Somewhere in here is a tooltip .
\\n
\\n Hello world!\\n \\n
\\n Click me \\n \\n {({ scheduleUpdate }) => (\\n \\n
\\n );\\n}\\n\\nexport default Example;\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport BadgeExample from '../examples/Badge';\nconst BadgeExampleSource = require('!!raw-loader!../examples/Badge');\n\nimport BadgeButtonExample from '../examples/BadgeButton';\nconst BadgeButtonExampleSource = require('!!raw-loader!../examples/BadgeButton');\n\nimport BadgePillsExample from '../examples/BadgePills';\nconst BadgePillsExampleSource = require('!!raw-loader!../examples/BadgePills');\n\nimport BadgeVariationsExample from '../examples/BadgeVariations';\nconst BadgeVariationsExampleSource = require('!!raw-loader!../examples/BadgeVariations');\n\nimport BadgeLinksExample from '../examples/BadgeLinks';\nconst BadgeLinksExampleSource = require('!!raw-loader!../examples/BadgeLinks');\n\nexport default class BadgesPage extends React.Component {\n render() {\n return (\n \n
\n
\n
Scale to parent
\n
\n
\n
\n \n {BadgeExampleSource}\n \n \n
Badges can be used as part of links or buttons to provide a counter.
\n
\n
\n
\n \n {BadgeButtonExampleSource}\n \n \n
Contextual variations \n
\n
\n
\n \n {BadgeVariationsExampleSource}\n \n \n
Pills \n
\n
\n
\n \n {BadgePillsExampleSource}\n \n \n
Links \n
Adding the href prop (without specifying a tag prop) will default the badge to a link.
\n
\n
\n
\n \n {BadgeLinksExampleSource}\n \n \n
\n
Heading New \n Heading New \n Heading New \n Heading New \n Heading New \n Heading New \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Badge, Button } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n Notifications 4 \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Badge } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Primary \n Secondary \n Success \n Danger \n Warning \n Info \n Light \n Dark \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Badge } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Primary \n Secondary \n Success \n Danger \n Warning \n Info \n Light \n Dark \n
\n );\n\n}\n\nexport default Example;\n","import React from 'react';\nimport { Badge } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Primary \n Secondary \n Success \n Danger \n Warning \n Info \n Light \n Dark \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { Badge } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
Heading New \\n Heading New \\n Heading New \\n Heading New \\n Heading New \\n Heading New \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Badge, Button } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n Notifications 4 \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Badge } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Primary \\n Secondary \\n Success \\n Danger \\n Warning \\n Info \\n Light \\n Dark \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Badge } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Primary \\n Secondary \\n Success \\n Danger \\n Warning \\n Info \\n Light \\n Dark \\n
\\n );\\n\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Badge } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Primary \\n Secondary \\n Success \\n Danger \\n Warning \\n Info \\n Light \\n Dark \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport MediaExample from '../examples/Media';\nconst MediaExampleSource = require('!!raw-loader!../examples/Media');\n\nimport MediaNestedExample from '../examples/MediaNested';\nconst MediaNestedExampleSource = require('!!raw-loader!../examples/MediaNested');\n\nimport MediaAlignmentExample from '../examples/MediaAlignment';\nconst MediaAlignmentExampleSource = require('!!raw-loader!../examples/MediaAlignment');\n\nimport MediaListExample from '../examples/MediaList';\nconst MediaListExampleSource = require('!!raw-loader!../examples/MediaList');\n\nexport default class MediaPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n \n {MediaExampleSource}\n \n \n
Properties \n
\n \n{`Media.propTypes = {\n body: PropTypes.bool,\n bottom: PropTypes.bool,\n children: PropTypes.node,\n className: PropTypes.string,\n heading: PropTypes.bool,\n left: PropTypes.bool,\n list: PropTypes.bool,\n middle: PropTypes.bool,\n object: PropTypes.bool,\n right: PropTypes.bool,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n top: PropTypes.bool,\n};`}\n \n \n
Nesting \n
\n
\n
\n \n {MediaNestedExampleSource}\n \n \n
Alignment \n
\n
\n
\n \n {MediaAlignmentExampleSource}\n \n \n
Media list \n
\n
\n
\n \n {MediaListExampleSource}\n \n \n
\n \n \n \n \n Media heading\n \n 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.\n \n \n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Media } from 'reactstrap';\n\nconst Example = () => {\n return (\n \n \n \n \n \n Media heading\n \n 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.\n \n \n \n \n \n Nested media heading\n \n 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.\n \n \n \n \n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Media } from 'reactstrap';\n\nconst Example = () => {\n return (\n \n \n \n \n \n \n Top aligned media\n \n 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.\n \n \n \n \n \n \n \n Middle aligned media\n \n 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.\n \n \n \n \n \n \n \n Bottom aligned media\n \n 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.\n \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Media } from 'reactstrap';\n\nconst Example = () => {\n return (\n \n \n \n \n \n \n Media heading\n \n 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.\n \n \n \n \n \n Nested media heading\n \n 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.\n \n \n \n \n \n Nested media heading\n \n 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.\n \n \n \n \n \n \n \n \n \n Nested media heading\n \n 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.\n \n \n \n \n \n \n \n Media heading\n \n 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.\n \n \n \n \n \n );\n};\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { Media } from 'reactstrap';\\n\\nconst Example = () => {\\n return (\\n \\n \\n \\n \\n \\n Media heading\\n \\n 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.\\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Media } from 'reactstrap';\\n\\nconst Example = () => {\\n return (\\n \\n \\n \\n \\n \\n Media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n Nested media heading\\n \\n 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.\\n \\n \\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Media } from 'reactstrap';\\n\\nconst Example = () => {\\n return (\\n \\n \\n \\n \\n \\n \\n Top aligned media\\n \\n 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.\\n \\n \\n \\n \\n \\n \\n \\n Middle aligned media\\n \\n 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.\\n \\n \\n \\n \\n \\n \\n \\n Bottom aligned media\\n \\n 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.\\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Media } from 'reactstrap';\\n\\nconst Example = () => {\\n return (\\n \\n \\n \\n \\n \\n \\n Media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n Nested media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n Nested media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n \\n \\n \\n \\n Nested media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n \\n \\n Media heading\\n \\n 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.\\n \\n \\n \\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\n\nimport PageTitle from '../UI/PageTitle';\nimport ModalExample from '../examples/Modal';\nimport ModalBackdropExample from '../examples/ModalBackdrop';\nimport ModalNestedExample from '../examples/ModalNested';\nimport ModalCustomTimeoutExample from '../examples/ModalCustomTimeout';\nimport ModalFadelessExample from '../examples/ModalFadeless';\nimport ModalExternalExample from '../examples/ModalExternal';\nimport ModalCustomCloseIconExample from '../examples/ModalCustomCloseIcon';\nimport ModalCustomCloseButtonExample from '../examples/ModalCustomCloseButton';\nimport ModalDestructuringExample from '../examples/ModalDestructuring';\nimport ModalFocusAfterClose from '../examples/ModalFocusAfterClose';\n\nconst ModalBackdropExampleSource = require('!!raw-loader!../examples/ModalBackdrop');\nconst ModalCustomCloseButtonExampleSource = require('!!raw-loader!../examples/ModalCustomCloseButton');\nconst ModalCustomCloseIconExampleSource = require('!!raw-loader!../examples/ModalCustomCloseIcon');\nconst ModalCustomTimeoutExampleSource = require('!!raw-loader!../examples/ModalCustomTimeout');\nconst ModalExampleSource = require('!!raw-loader!../examples/Modal');\nconst ModalExternalExampleSource = require('!!raw-loader!../examples/ModalExternal');\nconst ModalFadelessExampleSource = require('!!raw-loader!../examples/ModalFadeless');\nconst ModalNestedExampleSource = require('!!raw-loader!../examples/ModalNested');\nconst ModalDestructuringExampleSource = require('!!raw-loader!../examples/ModalDestructuring');\nconst ModalFocusOnDestroyExampleSource = require('!!raw-loader!../examples/ModalFocusAfterClose');\n\nconst ModalsPage = () => {\n return (\n \n
\n
\n
\n \n {ModalExampleSource}\n \n \n
Properties \n
\n \n {`Modal.propTypes = {\n // boolean to control the state of the popover\n isOpen: PropTypes.bool,\n autoFocus: PropTypes.bool,\n // if modal should be centered vertically in viewport\n centered: PropTypes.bool,\n // corresponds to bootstrap's modal sizes, ie. 'lg' or 'sm'\n size: PropTypes.string,\n // callback for toggling isOpen in the controlling component\n toggle: PropTypes.func,\n role: PropTypes.string, // defaults to \"dialog\"\n // used to reference the ID of the title element in the modal\n labelledBy: PropTypes.string,\n keyboard: PropTypes.bool,\n // control backdrop, see http://v4-alpha.getbootstrap.com/components/modal/#options\n backdrop: PropTypes.oneOfType([\n PropTypes.bool,\n PropTypes.oneOf(['static'])\n ]),\n // if body of modal should be scrollable when content is long\n scrollable: PropTypes.bool,\n // allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons\n external: PropTypes.node,\n // called on componentDidMount\n onEnter: PropTypes.func,\n // called on componentWillUnmount\n onExit: PropTypes.func,\n // called when done transitioning in\n onOpened: PropTypes.func,\n // called when done transitioning out\n onClosed: PropTypes.func,\n className: PropTypes.string,\n wrapClassName: PropTypes.string,\n modalClassName: PropTypes.string,\n backdropClassName: PropTypes.string,\n contentClassName: PropTypes.string,\n // boolean to control whether the fade transition occurs (default: true)\n fade: PropTypes.bool,\n cssModule: PropTypes.object,\n // zIndex defaults to 1000.\n zIndex: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n ]),\n // backdropTransition - controls backdrop transition\n // timeout is 150ms by default to match bootstrap\n // see [Fade](/components/fade/) for more details\n backdropTransition: PropTypes.shape(Fade.propTypes),\n // modalTransition - controls modal transition\n // timeout is 300ms by default to match bootstrap\n // see [Fade](/components/fade/) for more details\n modalTransition: PropTypes.shape(Fade.propTypes),\n innerRef: PropTypes.object,\n // if modal should be destructed/removed from DOM after closing\n unmountOnClose: PropTypes.bool, // defaults to true\n // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below)\n returnFocusAfterClose: PropTypes.bool, // defaults to true\n // container to append the modal to\n container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),\n trapFocus: PropTypes.bool // Traps focus within modal\n}`}\n \n \n\n
Backdrop \n
\n
\n \n {ModalBackdropExampleSource}\n \n \n\n
Nested Modals \n
\n
\n \n {ModalNestedExampleSource}\n \n \n\n
Modals with Custom Transition Timeouts \n
\n
\n \n {ModalCustomTimeoutExampleSource}\n \n \n\n
Modals without Fade Effect \n
\n
\n \n {ModalFadelessExampleSource}\n \n \n\n
Modals with external button \n
\n
\n \n {ModalExternalExampleSource}\n \n \n\n
Modals with custom close icon \n
\n
\n \n {ModalCustomCloseIconExampleSource}\n \n \n
Modals with custom close button \n
\n
\n \n {ModalCustomCloseButtonExampleSource}\n \n \n\n
Destructuring \n
\n
\n \n {ModalDestructuringExampleSource}\n \n \n\n
Focus after close \n
\n
\n \n {ModalFocusOnDestroyExampleSource}\n \n \n
\n {buttonLabel} \n \n Modal title \n \n 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.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n const [modal, setModal] = useState(false);\n const [backdrop, setBackdrop] = useState(true);\n const [keyboard, setKeyboard] = useState(true);\n\n const toggle = () => setModal(!modal);\n\n const changeBackdrop = e => {\n let value = e.target.value;\n if (value !== 'static') {\n value = JSON.parse(value);\n }\n setBackdrop(value);\n }\n\n const changeKeyboard = e => {\n setKeyboard(e.currentTarget.checked);\n }\n\n return (\n \n \n \n Modal title \n \n 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.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n const [nestedModal, setNestedModal] = useState(false);\n const [closeAll, setCloseAll] = useState(false);\n\n const toggle = () => setModal(!modal);\n const toggleNested = () => {\n setNestedModal(!nestedModal);\n setCloseAll(false);\n }\n const toggleAll = () => {\n setNestedModal(!nestedModal);\n setCloseAll(true);\n }\n\n return (\n \n {buttonLabel} \n \n Modal title \n \n 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.\n Show Nested Modal \n \n Nested Modal title \n Stuff and things \n \n Done {' '}\n All Done \n \n \n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => setModal(!modal);\n\n return (\n \n {buttonLabel} \n \n Modal title \n \n 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.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => setModal(!modal);\n\n return (\n \n {buttonLabel} \n \n Modal title \n \n 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.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => setModal(!modal);\n\n const externalCloseBtn = × ;\n return (\n \n {buttonLabel} \n \n Modal title \n \n Look at the top right of the page/viewport! \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => setModal(!modal);\n\n return (\n \n {buttonLabel} \n \n Modal title \n \n 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.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n\n const [modal, setModal] = useState(false);\n\n const toggle = () => setModal(!modal);\n\n const closeBtn = × ;\n\n return (\n \n {buttonLabel} \n \n Modal title \n \n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip\n ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\n fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n \n \n Do Something {' '}\n Cancel \n \n \n
\n);\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';\n\nconst ModalExample = (props) => {\n const {\n buttonLabel,\n className\n } = props;\n \n const [modal, setModal] = useState(false);\n const [unmountOnClose, setUnmountOnClose] = useState(true);\n \n const toggle = () => setModal(!modal);\n const changeUnmountOnClose = e => {\n let value = e.target.value;\n setUnmountOnClose(JSON.parse(value));\n }\n \n return (\n \n \n \n Modal title \n \n \n \n Do Something {' '}\n Cancel \n \n \n
\n );\n}\n\nexport default ModalExample;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, Label, Input, FormGroup, Form } from 'reactstrap';\n\nconst ModalFocusAfterClose = (props) => {\n const [open, setOpen] = useState(false);\n const [focusAfterClose, setFocusAfterClose] = useState(true);\n\n const toggle = () => setOpen(!open);\n const handleSelectChange = ({target: { value }}) => {\n setFocusAfterClose(JSON.parse(value));\n }\n\n return (\n \n \n \n \n Observe the \"Open\" button. It will be focused after close when \"returnFocusAfterClose\" is true and will not be focused if \"returnFocusAfterClose\" is false.\n \n \n Close \n \n \n
\n )\n}\n\nexport default ModalFocusAfterClose;\n","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n const [modal, setModal] = useState(false);\\n const [backdrop, setBackdrop] = useState(true);\\n const [keyboard, setKeyboard] = useState(true);\\n\\n const toggle = () => setModal(!modal);\\n\\n const changeBackdrop = e => {\\n let value = e.target.value;\\n if (value !== 'static') {\\n value = JSON.parse(value);\\n }\\n setBackdrop(value);\\n }\\n\\n const changeKeyboard = e => {\\n setKeyboard(e.currentTarget.checked);\\n }\\n\\n return (\\n \\n \\n \\n Modal title \\n \\n 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.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n const closeBtn = × ;\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\\n dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip\\n ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\\n fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt\\n mollit anim id est laborum.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n);\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n 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.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n 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.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n 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.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n const externalCloseBtn = × ;\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n Look at the top right of the page/viewport! \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n 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.\\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n\\n const [modal, setModal] = useState(false);\\n const [nestedModal, setNestedModal] = useState(false);\\n const [closeAll, setCloseAll] = useState(false);\\n\\n const toggle = () => setModal(!modal);\\n const toggleNested = () => {\\n setNestedModal(!nestedModal);\\n setCloseAll(false);\\n }\\n const toggleAll = () => {\\n setNestedModal(!nestedModal);\\n setCloseAll(true);\\n }\\n\\n return (\\n \\n {buttonLabel} \\n \\n Modal title \\n \\n 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.\\n Show Nested Modal \\n \\n Nested Modal title \\n Stuff and things \\n \\n Done {' '}\\n All Done \\n \\n \\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';\\n\\nconst ModalExample = (props) => {\\n const {\\n buttonLabel,\\n className\\n } = props;\\n \\n const [modal, setModal] = useState(false);\\n const [unmountOnClose, setUnmountOnClose] = useState(true);\\n \\n const toggle = () => setModal(!modal);\\n const changeUnmountOnClose = e => {\\n let value = e.target.value;\\n setUnmountOnClose(JSON.parse(value));\\n }\\n \\n return (\\n \\n \\n \\n Modal title \\n \\n \\n \\n Do Something {' '}\\n Cancel \\n \\n \\n
\\n );\\n}\\n\\nexport default ModalExample;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Modal, ModalBody, ModalFooter, Label, Input, FormGroup, Form } from 'reactstrap';\\n\\nconst ModalFocusAfterClose = (props) => {\\n const [open, setOpen] = useState(false);\\n const [focusAfterClose, setFocusAfterClose] = useState(true);\\n\\n const toggle = () => setOpen(!open);\\n const handleSelectChange = ({target: { value }}) => {\\n setFocusAfterClose(JSON.parse(value));\\n }\\n\\n return (\\n \\n \\n \\n \\n Observe the \\\"Open\\\" button. It will be focused after close when \\\"returnFocusAfterClose\\\" is true and will not be focused if \\\"returnFocusAfterClose\\\" is false.\\n \\n \\n Close \\n \\n \\n
\\n )\\n}\\n\\nexport default ModalFocusAfterClose;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport CardExample from '../examples/Card';\nimport CardContentExample from '../examples/CardContentTypes';\nimport CardSizingExample from '../examples/CardSizing';\nimport CardAlignmentExample from '../examples/CardAlignment';\nimport CardHeaderFooterExample from '../examples/CardHeaderFooter';\nimport CardImageCapsExample from '../examples/CardImageCaps';\nimport CardImageOverlayExample from '../examples/CardImageOverlay';\nimport CardBackgroundsExample from '../examples/CardBackgrounds';\nimport CardOutlineExample from '../examples/CardOutline';\nimport CardGroupsExample from '../examples/CardGroups';\nimport CardDecksExample from '../examples/CardDecks';\nimport CardColumnsExample from '../examples/CardColumns';\n\nconst CardExampleSource = require('!!raw-loader!../examples/Card');\nconst CardContentExampleSource = require('!!raw-loader!../examples/CardContentTypes');\nconst CardSizingExampleSource = require('!!raw-loader!../examples/CardSizing');\nconst CardAlignmentExampleSource = require('!!raw-loader!../examples/CardAlignment');\nconst CardHeaderFooterExampleSource = require('!!raw-loader!../examples/CardHeaderFooter');\nconst CardImageCapsExampleSource = require('!!raw-loader!../examples/CardImageCaps');\nconst CardImageOverlayExampleSource = require('!!raw-loader!../examples/CardImageOverlay');\nconst CardBackgroundsExampleSource = require('!!raw-loader!../examples/CardBackgrounds');\nconst CardOutlineExampleSource = require('!!raw-loader!../examples/CardOutline');\nconst CardGroupsExampleSource = require('!!raw-loader!../examples/CardGroups');\nconst CardDecksExampleSource = require('!!raw-loader!../examples/CardDecks');\nconst CardColumnsExampleSource = require('!!raw-loader!../examples/CardColumns');\n\nexport default class CardPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n
\n \n {CardExampleSource}\n \n \n
Properties \n
\n \n{`Card.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n inverse: PropTypes.bool,\n color: PropTypes.string,\n body: PropTypes.bool,\n className: PropTypes.string\n};\n\nCardBody.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardColumns.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardDeck.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardFooter.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardGroup.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardHeader.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardImg.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n // Use top or bottom to position image via \"card-img-top\" or \"card-img-bottom\"\n top: PropTypes.bool,\n bottom: PropTypes.bool\n};\n\nCardImgOverlay.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardLink.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n // ref will only get you a reference to the CardLink component, use innerRef to get a reference to the DOM element (for things like focus management).\n innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])\n};\n\nCardSubtitle.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardText.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};\n\nCardTitle.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string\n};`}\n \n \n
Content Types \n
\n
\n
\n \n {CardContentExampleSource}\n \n \n
Sizing \n
\n
\n
\n \n {CardSizingExampleSource}\n \n \n
Text alignment \n
\n
\n
\n \n {CardAlignmentExampleSource}\n \n \n
Header and Footer \n
\n
\n
\n \n {CardHeaderFooterExampleSource}\n \n \n
Image caps \n
\n
\n
\n \n {CardImageCapsExampleSource}\n \n \n
Image overlays \n
\n
\n
\n \n {CardImageOverlayExampleSource}\n \n \n
Background variants \n
\n
\n
\n \n {CardBackgroundsExampleSource}\n \n \n
Outline variants \n
\n
\n
\n \n {CardOutlineExampleSource}\n \n \n
Groups \n
\n
\n
\n \n {CardGroupsExampleSource}\n \n \n
Decks \n
\n
\n
\n \n {CardDecksExampleSource}\n \n \n
Columns \n
\n
\n
\n \n {CardColumnsExampleSource}\n \n \n
\n \n \n Card title \n Card subtitle \n Some quick example text to build on the card title and make up the bulk of the card's content. \n Button \n \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport {\n Card, CardText, CardBody, CardLink,\n CardTitle, CardSubtitle\n} from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n
\n \n Card title \n Card subtitle \n \n \n Some quick example text to build on the card title and make up the bulk of the card's content. \n Card Link \n Another Link \n \n \n
\n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, Button, CardHeader, CardFooter, CardBody,\n CardTitle, CardText } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n Header \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n Footer \n \n\n \n Featured \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n Footer \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n Card Title \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n \n Last updated 3 mins ago \n \n \n \n \n \n Card Title \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n \n Last updated 3 mins ago \n \n \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n Card Title \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n \n Last updated 3 mins ago \n \n \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n
\n );\n};\n\nexport default Example;\n","import React from 'react';\nimport {\n Card, Button, CardImg, CardTitle, CardText, CardGroup,\n CardSubtitle, CardBody\n} from 'reactstrap';\nconst Example = (props) => {\n return (\n \n \n \n Card title \n Card subtitle \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n Button \n \n \n \n \n Card title \n Card subtitle \n This card has supporting text below as a natural lead-in to additional content. \n Button \n \n \n \n \n Card title \n Card subtitle \n 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. \n Button \n \n \n \n );\n};\n\nexport default Example;\n","import React from 'react';\nimport {\n Card, Button, CardImg, CardTitle, CardText, CardDeck,\n CardSubtitle, CardBody\n} from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n Card title \n Card subtitle \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n Button \n \n \n \n \n Card title \n Card subtitle \n This card has supporting text below as a natural lead-in to additional content. \n Button \n \n \n \n \n Card title \n Card subtitle \n 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. \n Button \n \n \n \n );\n};\n\nexport default Example;\n","import React from 'react';\nimport {\n Card, Button, CardImg, CardTitle, CardText, CardColumns,\n CardSubtitle, CardBody\n} from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n Card title \n Card subtitle \n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \n Button \n \n \n \n \n \n \n Card title \n Card subtitle \n This card has supporting text below as a natural lead-in to additional content. \n Button \n \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n \n Card title \n Card subtitle \n 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. \n Button \n \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Button \n \n \n );\n};\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport {\\n Card, CardImg, CardText, CardBody,\\n CardTitle, CardSubtitle, Button\\n} from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card title \\n Card subtitle \\n Some quick example text to build on the card title and make up the bulk of the card's content. \\n Button \\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport {\\n Card, CardText, CardBody, CardLink,\\n CardTitle, CardSubtitle\\n} from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
\\n \\n Card title \\n Card subtitle \\n \\n \\n Some quick example text to build on the card title and make up the bulk of the card's content. \\n Card Link \\n Another Link \\n \\n \\n
\\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, Button, CardHeader, CardFooter, CardBody,\\n CardTitle, CardText } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n Header \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n Footer \\n \\n\\n \\n Featured \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n Footer \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card Title \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n \\n Last updated 3 mins ago \\n \\n \\n \\n \\n \\n Card Title \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n \\n Last updated 3 mins ago \\n \\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card Title \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n \\n Last updated 3 mins ago \\n \\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Card, Button, CardTitle, CardText } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport {\\n Card, Button, CardImg, CardTitle, CardText, CardGroup,\\n CardSubtitle, CardBody\\n} from 'reactstrap';\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card title \\n Card subtitle \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n Button \\n \\n \\n \\n \\n Card title \\n Card subtitle \\n This card has supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n \\n \\n Card title \\n Card subtitle \\n 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. \\n Button \\n \\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport {\\n Card, Button, CardImg, CardTitle, CardText, CardDeck,\\n CardSubtitle, CardBody\\n} from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card title \\n Card subtitle \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n Button \\n \\n \\n \\n \\n Card title \\n Card subtitle \\n This card has supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n \\n \\n Card title \\n Card subtitle \\n 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. \\n Button \\n \\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport {\\n Card, Button, CardImg, CardTitle, CardText, CardColumns,\\n CardSubtitle, CardBody\\n} from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n Card title \\n Card subtitle \\n This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. \\n Button \\n \\n \\n \\n \\n \\n \\n Card title \\n Card subtitle \\n This card has supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n \\n Card title \\n Card subtitle \\n 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. \\n Button \\n \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Button \\n \\n \\n );\\n};\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport TableExample from '../examples/Table';\nimport TableBorderedExample from '../examples/TableBordered';\nimport TableBorderlessExample from '../examples/TableBorderless';\nimport TableHoverExample from '../examples/TableHover';\nimport TableDarkExample from '../examples/TableDark';\nimport TableResponsiveExample from '../examples/TableResponsive';\nimport TableSizingExample from '../examples/TableSizing';\nimport TableStripedExample from '../examples/TableStriped';\n\nconst TableExampleSource = require('!!raw-loader!../examples/Table');\nconst TableBorderedExampleSource = require('!!raw-loader!../examples/TableBordered');\nconst TableBorderlessExampleSource = require('!!raw-loader!../examples/TableBorderless');\nconst TableHoverExampleSource = require('!!raw-loader!../examples/TableHover');\nconst TableDarkExampleSource = require('!!raw-loader!../examples/TableDark');\nconst TableResponsiveExampleSource = require('!!raw-loader!../examples/TableResponsive');\nconst TableSizingExampleSource = require('!!raw-loader!../examples/TableSizing');\nconst TableStripedExampleSource = require('!!raw-loader!../examples/TableStriped');\n\nexport default class TablesPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n \n {TableExampleSource}\n \n \n
Properties \n
\n \n{`Table.propTypes = {\n// Pass in a Component to override default element\ntag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\nsize: PropTypes.string,\nbordered: PropTypes.bool,\nborderless: PropTypes.bool,\nstriped: PropTypes.bool,\ndark: PropTypes.bool,\nhover: PropTypes.bool,\nresponsive: PropTypes.bool,\n// Custom ref handler that will be assigned to the \"ref\" of the inner element\ninnerRef: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.string,\n PropTypes.object\n])\n};`}\n \n \n Dark table \n \n \n \n {TableDarkExampleSource}\n \n \n Striped rows \n \n \n \n {TableStripedExampleSource}\n \n \n Bordered table \n \n \n \n {TableBorderedExampleSource}\n \n \n Borderless table \n \n \n \n {TableBorderlessExampleSource}\n \n \n Hoverable rows \n \n \n \n {TableHoverExampleSource}\n \n \n Small table \n \n \n \n {TableSizingExampleSource}\n \n \n Responsive table \n \n \n \n {TableResponsiveExampleSource}\n \n \n \n );\n }\n}\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n Table heading \n Table heading \n Table heading \n Table heading \n Table heading \n Table heading \n \n \n \n \n 1 \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n \n \n 2 \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n \n \n 3 \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n Table cell \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Table } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n # \n First Name \n Last Name \n Username \n \n \n \n \n 1 \n Mark \n Otto \n @mdo \n \n \n 2 \n Jacob \n Thornton \n @fat \n \n \n 3 \n Larry \n the Bird \n @twitter \n \n \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n Table heading \\n Table heading \\n Table heading \\n Table heading \\n Table heading \\n Table heading \\n \\n \\n \\n \\n 1 \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n \\n \\n 2 \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n \\n \\n 3 \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n Table cell \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Table } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n # \\n First Name \\n Last Name \\n Username \\n \\n \\n \\n \\n 1 \\n Mark \\n Otto \\n @mdo \\n \\n \\n 2 \\n Jacob \\n Thornton \\n @fat \\n \\n \\n 3 \\n Larry \\n the Bird \\n @twitter \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport PaginationExample from '../examples/Pagination';\nconst PaginationExampleSource = require('!!raw-loader!../examples/Pagination');\n\nimport PaginationStateExample from '../examples/PaginationState';\nconst PaginationStateExampleSource = require('!!raw-loader!../examples/PaginationState');\n\nimport PaginationSizingLargeExample from '../examples/PaginationSizingLarge';\nconst PaginationSizingLargeExampleSource = require('!!raw-loader!../examples/PaginationSizingLarge');\n\nimport PaginationSizingSmallExample from '../examples/PaginationSizingSmall';\nconst PaginationSizingSmallExampleSource = require('!!raw-loader!../examples/PaginationSizingSmall');\n\nexport default class PaginationPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n \n {PaginationExampleSource}\n \n \n
Properties \n
\n \n{`Pagination.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n listClassName: PropTypes.string,\n cssModule: PropTypes.object,\n size: PropTypes.string,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n 'aria-label': PropTypes.string\n};\n\nPaginationItem.propTypes = {\n active: PropTypes.bool,\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n disabled: PropTypes.bool,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n};\n\nPaginationLink.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n next: PropTypes.bool,\n previous: PropTypes.bool,\n first: PropTypes.bool,\n last: PropTypes.bool,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n 'aria-label': PropTypes.string\n};\n`}\n \n \n
Disabled and active states \n
\n
\n \n {PaginationStateExampleSource}\n \n \n
Sizing \n
\n
\n \n {PaginationSizingLargeExampleSource}\n \n \n
\n
\n \n {PaginationSizingSmallExampleSource}\n \n \n
\n \n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n 4\n \n \n \n \n 5\n \n \n \n \n \n \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n 4\n \n \n \n \n 5\n \n \n \n \n \n \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n \n \n \n \n \n 1\n \n \n \n \n 2\n \n \n \n \n 3\n \n \n \n \n \n \n \n );\n}\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n \\n \\n \\n \\n 1\\n \\n \\n \\n \\n 2\\n \\n \\n \\n \\n 3\\n \\n \\n \\n \\n 4\\n \\n \\n \\n \\n 5\\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n \\n \\n \\n \\n 1\\n \\n \\n \\n \\n 2\\n \\n \\n \\n \\n 3\\n \\n \\n \\n \\n 4\\n \\n \\n \\n \\n 5\\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n \\n \\n \\n \\n 1\\n \\n \\n \\n \\n 2\\n \\n \\n \\n \\n 3\\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Pagination, PaginationItem, PaginationLink } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n \\n \\n \\n \\n \\n 1\\n \\n \\n \\n \\n 2\\n \\n \\n \\n \\n 3\\n \\n \\n \\n \\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\n\nimport TabsExample from '../examples/Tabs';\nconst TabsExampleSource = require('!!raw-loader!../examples/Tabs');\n\nexport default function TabsPage() {\n return (\n \n
\n
\n
\n
\n
\n \n {TabsExampleSource}\n \n \n
\n \n \n { toggle('1'); }}\n >\n Tab1\n \n \n \n { toggle('2'); }}\n >\n More Tabs\n \n \n \n \n \n \n Tab 1 Contents \n \n
\n \n \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n \n Special Title Treatment \n With supporting text below as a natural lead-in to additional content. \n Go somewhere \n \n \n
\n \n \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React, { useState } from 'react';\\nimport { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';\\nimport classnames from 'classnames';\\n\\nconst Example = (props) => {\\n const [activeTab, setActiveTab] = useState('1');\\n\\n const toggle = tab => {\\n if(activeTab !== tab) setActiveTab(tab);\\n }\\n\\n return (\\n \\n \\n \\n { toggle('1'); }}\\n >\\n Tab1\\n \\n \\n \\n { toggle('2'); }}\\n >\\n More Tabs\\n \\n \\n \\n \\n \\n \\n Tab 1 Contents \\n \\n
\\n \\n \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n \\n Special Title Treatment \\n With supporting text below as a natural lead-in to additional content. \\n Go somewhere \\n \\n \\n
\\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","import React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport JumbotronExample from '../examples/Jumbotron';\nimport JumbotronFluidExample from \"../examples/JumbotronFluid\";\n\nconst JumbotronExampleSource = require('!!raw-loader!../examples/Jumbotron');\nconst JumbotronFluidExampleSource = require('!!raw-loader!../examples/JumbotronFluid');\n\nexport default class JumbotronPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n
\n \n {JumbotronExampleSource}\n \n \n
Properties \n
\n \n{`Jumbotron.propTypes = {\n // Pass in a Component to override default element\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n fluid: PropTypes.bool,\n className: PropTypes.string\n};`}\n \n \n\n
Fluid Jumbotron \n
\n
\n
\n
\n \n {JumbotronFluidExampleSource}\n \n \n
\n
\n Hello, world! \n This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.
\n It uses utility classes for typography and spacing to space content out within the larger container.
\n \n Learn More \n
\n \n
\n
\n \n Fluid jumbotron \n This is a modified jumbotron that occupies the entire horizontal space of its parent.
\n \n \n
\\n
\\n Hello, world! \\n This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.
\\n It uses utility classes for typography and spacing to space content out within the larger container.
\\n \\n Learn More \\n
\\n \\n
\\n
\\n \\n Fluid jumbotron \\n This is a modified jumbotron that occupies the entire horizontal space of its parent.
\\n \\n \\n
\n
\n
\n
\n \n {AlertExampleSource}\n \n \n\n
Properties \n
\n \n{`Alert.propTypes = {\n className: PropTypes.string,\n closeClassName: PropTypes.string,\n color: PropTypes.string, // default: 'success'\n isOpen: PropTypes.bool, // default: true\n toggle: PropTypes.func,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n fade: PropTypes.bool, // default: true\n // Controls the transition of the alert fading in and out\n // See [Fade](/components/fade/) for more details\n transition: PropTypes.shape(Fade.propTypes),\n}`}\n \n \n\n
Link color \n
\n
\n \n {AlertLinkExampleSource}\n \n \n\n
Additional content \n
\n
\n \n {AlertContentExampleSource}\n \n \n\n
Dismissing \n
\n
\n \n {AlertDismissExampleSource}\n \n \n\n
Uncontrolled [disable] Alerts \n
\n For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledAlert does not require isOpen nor toggle props to work.\n
\n
\n
\n \n {AlertUncontrolledDismissExampleSource}\n \n \n\n
Alerts without fade \n
\n Fade can be disabled using fade=false.\n
\n
\n
\n \n {AlertFadelessExampleSource}\n \n \n
\n
\n This is a primary alert — check it out!\n \n
\n This is a secondary alert — check it out!\n \n
\n This is a success alert — check it out!\n \n
\n This is a danger alert — check it out!\n \n
\n This is a warning alert — check it out!\n \n
\n This is a info alert — check it out!\n \n
\n This is a light alert — check it out!\n \n
\n This is a dark alert — check it out!\n \n
\n
\n This is a primary alert with an example link . Give it a click if you like.\n \n
\n This is a secondary alert with an example link . Give it a click if you like.\n \n
\n This is a success alert with an example link . Give it a click if you like.\n \n
\n This is a danger alert with an example link . Give it a click if you like.\n \n
\n This is a warning alert with an example link . Give it a click if you like.\n \n
\n This is a info alert with an example link . Give it a click if you like.\n \n
\n This is a light alert with an example link . Give it a click if you like.\n \n
\n This is a dark alert with an example link . Give it a click if you like.\n \n
\n
\n Well done! \n \n Aww yeah, you successfully read this important alert message. This example text is going\n to run a bit longer so that you can see how spacing within an alert works with this kind\n of content.\n
\n \n Whenever you need to, be sure to use margin utilities to keep things nice and tidy.\n
\n \n
\n I am an alert and I can be dismissed!\n \n );\n}\n\nexport default AlertExample;\n","module.exports = \"import React from 'react';\\nimport { Alert } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
\\n This is a primary alert — check it out!\\n \\n
\\n This is a secondary alert — check it out!\\n \\n
\\n This is a success alert — check it out!\\n \\n
\\n This is a danger alert — check it out!\\n \\n
\\n This is a warning alert — check it out!\\n \\n
\\n This is a info alert — check it out!\\n \\n
\\n This is a light alert — check it out!\\n \\n
\\n This is a dark alert — check it out!\\n \\n
\\n
\\n This is a primary alert with an example link . Give it a click if you like.\\n \\n
\\n This is a secondary alert with an example link . Give it a click if you like.\\n \\n
\\n This is a success alert with an example link . Give it a click if you like.\\n \\n
\\n This is a danger alert with an example link . Give it a click if you like.\\n \\n
\\n This is a warning alert with an example link . Give it a click if you like.\\n \\n
\\n This is a info alert with an example link . Give it a click if you like.\\n \\n
\\n This is a light alert with an example link . Give it a click if you like.\\n \\n
\\n This is a dark alert with an example link . Give it a click if you like.\\n \\n
\\n
\\n Well done! \\n \\n Aww yeah, you successfully read this important alert message. This example text is going\\n to run a bit longer so that you can see how spacing within an alert works with this kind\\n of content.\\n
\\n \\n Whenever you need to, be sure to use margin utilities to keep things nice and tidy.\\n
\\n \\n
\\n I am an alert and I can be dismissed!\\n \\n );\\n}\\n\\nexport default AlertExample;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport ToastExample from '../examples/Toast';\nconst ToastExampleSource = require('!!raw-loader!../examples/Toast');\n\nimport ToastHeaderIconExample from '../examples/ToastHeaderIcon';\nconst ToastHeaderIconExampleSource = require('!!raw-loader!../examples/ToastHeaderIcon');\n\nimport ToastDismissExample from '../examples/ToastDismiss';\nconst ToastDismissExampleSource = require('!!raw-loader!../examples/ToastDismiss');\n\nimport AlertUncontrolledDismissExample from '../examples/AlertUncontrolledDismiss';\nconst AlertUncontrolledDismissExampleSource = require('!!raw-loader!../examples/AlertUncontrolledDismiss');\n\nimport { AlertFadelessExample, UncontrolledAlertFadelessExample } from '../examples/AlertFadeless';\nconst AlertFadelessExampleSource = require('!!raw-loader!../examples/AlertFadeless');\n\nexport default class ToastsPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n \n {ToastExampleSource}\n \n \n\n
Properties \n
\n \n{`Toast.propTypes = {\n className: PropTypes.string,\n color: PropTypes.string, // default: 'success'\n isOpen: PropTypes.bool, // default: true\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n // Controls the transition of the toast fading in and out\n // See [Fade](/components/fade/) for more details\n transition: PropTypes.shape(Fade.propTypes),\n}`}\n \n \n\n
Header icons \n
\n
\n
\n \n {ToastHeaderIconExampleSource}\n \n \n\n
Dismissing \n
\n
\n
\n \n {ToastDismissExampleSource}\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a white background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a gridded background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a primary background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a secondary background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a success background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a danger background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a warning background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on an info background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a dark background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast on a black background — check it out!\n \n \n
\n
\n \n \n Reactstrap\n \n \n This is a toast with a primary icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a secondary icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a success icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a danger icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a warning icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with an info icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a light icon — check it out!\n \n \n \n \n Reactstrap\n \n \n This is a toast with a dark icon — check it out!\n \n \n \n \n This is a toast with a custom icon — check it out!\n \n \n
\n );\n};\n\nexport default Example;\n","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\n\nimport React, { useState } from 'react';\nimport { Button, Toast, ToastBody, ToastHeader } from 'reactstrap';\n\nconst ToastDismissExample = (props) => {\n const { buttonLabel } = props;\n const [show, setShow] = useState(false);\n\n const toggle = () => setShow(!show);\n\n return (\n \n {buttonLabel} \n \n Toast title \n \n 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.\n \n \n
\n );\n}\n\nexport default ToastDismissExample;\n","module.exports = \"import React from 'react';\\nimport { Toast, ToastBody, ToastHeader } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a white background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a gridded background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a primary background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a secondary background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a success background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a danger background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a warning background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on an info background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a dark background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast on a black background — check it out!\\n \\n \\n
\\n
\\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a primary icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a secondary icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a success icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a danger icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a warning icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with an info icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a light icon — check it out!\\n \\n \\n \\n \\n Reactstrap\\n \\n \\n This is a toast with a dark icon — check it out!\\n \\n \\n \\n \\n This is a toast with a custom icon — check it out!\\n \\n \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","module.exports = \"/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\\n\\nimport React, { useState } from 'react';\\nimport { Button, Toast, ToastBody, ToastHeader } from 'reactstrap';\\n\\nconst ToastDismissExample = (props) => {\\n const { buttonLabel } = props;\\n const [show, setShow] = useState(false);\\n\\n const toggle = () => setShow(!show);\\n\\n return (\\n \\n {buttonLabel} \\n \\n Toast title \\n \\n 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.\\n \\n \\n
\\n );\\n}\\n\\nexport default ToastDismissExample;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport CollapseExample from '../examples/Collapse';\nimport UncontrolledCollapseExample from '../examples/CollapseUncontrolled';\n\nimport CollapseEventsExample from '../examples/CollapseEvents';\n\nconst CollapseExampleSource = require('!!raw-loader!../examples/Collapse');\nconst CollapseEventsExampleSource = require('!!raw-loader!../examples/CollapseEvents');\n\nconst UncontrolledCollapseExampleSource = require('!!raw-loader!../examples/CollapseUncontrolled');\n\nexport default class CollapsePage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n {CollapseExampleSource} \n \n\n
Properties \n
\n \n {`Collapse.propTypes = {\n ...Transition.propTypes, // see note below\n isOpen: PropTypes.bool,\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node\n ]),\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.node,\n navbar: PropTypes.bool,\n cssModule: PropTypes.object,\n innerRef: PropTypes.object,\n};`}\n \n \n
\n Collapse is wrapped in a Transition component\n from react-transition-group/transition. Transition props are passed through to\n this wrapper. Refer to the Transition documentation for details: \n http://reactcommunity.org/react-transition-group/transition/ .\n
\n\n
Events \n
\n Use the onEnter, onEntering, onEntered, onExiting and onExited props for\n callbacks when the Collapse has finished opening (entering) or closing (exiting).\n
\n
\n
\n
\n {CollapseEventsExampleSource} \n \n
Uncontrolled Collapse \n
\n For the most basic use-case, an uncontrolled component can provide the functionality\n wanted without the need to manage/control the state of the component.{' '}\n UncontrolledCollapse does not require an isOpen prop. Instead\n pass a toggler prop. The toggler prop is a string which will run\n querySelectorAll to find dom elements which will trigger toggle. The defaultOpen\n prop controls the initial state.\n
\n
\n
\n
\n {UncontrolledCollapseExampleSource} \n \n
\n Toggle \n \n \n \n Anim pariatur cliche reprehenderit,\n enim eiusmod high life accusamus terry richardson ad squid. Nihil\n anim keffiyeh helvetica, craft beer labore wes anderson cred\n nesciunt sapiente ea proident.\n \n \n \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';\n\nconst Example = () => (\n \n \n Toggle\n \n \n \n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis\n similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed\n dignissimos esse fuga! Minus, alias.\n \n \n \n
\n);\n\nexport default Example;\n","import React, { useState } from 'react';\nimport { Collapse, Button, CardBody, Card } from 'reactstrap';\n\nconst Example = (props) => {\n const [collapse, setCollapse] = useState(false);\n const [status, setStatus] = useState('Closed');\n\n const onEntering = () => setStatus('Opening...');\n\n const onEntered = () => setStatus('Opened');\n\n const onExiting = () => setStatus('Closing...');\n\n const onExited = () => setStatus('Closed');\n\n const toggle = () => setCollapse(!collapse);\n\n return (\n \n Toggle \n
Current state: {status} \n \n \n \n Anim pariatur cliche reprehenderit,\n enim eiusmod high life accusamus terry richardson ad squid. Nihil\n anim keffiyeh helvetica, craft beer labore wes anderson cred\n nesciunt sapiente ea proident.\n \n \n \n \n );\n}\n\nexport default Example;\n","module.exports = \"import React, { useState } from 'react';\\nimport { Collapse, Button, CardBody, Card } from 'reactstrap';\\n\\nconst Example = (props) => {\\n const [isOpen, setIsOpen] = useState(false);\\n\\n const toggle = () => setIsOpen(!isOpen);\\n\\n return (\\n \\n Toggle \\n \\n \\n \\n Anim pariatur cliche reprehenderit,\\n enim eiusmod high life accusamus terry richardson ad squid. Nihil\\n anim keffiyeh helvetica, craft beer labore wes anderson cred\\n nesciunt sapiente ea proident.\\n \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React, { useState } from 'react';\\nimport { Collapse, Button, CardBody, Card } from 'reactstrap';\\n\\nconst Example = (props) => {\\n const [collapse, setCollapse] = useState(false);\\n const [status, setStatus] = useState('Closed');\\n\\n const onEntering = () => setStatus('Opening...');\\n\\n const onEntered = () => setStatus('Opened');\\n\\n const onExiting = () => setStatus('Closing...');\\n\\n const onExited = () => setStatus('Closed');\\n\\n const toggle = () => setCollapse(!collapse);\\n\\n return (\\n \\n Toggle \\n
Current state: {status} \\n \\n \\n \\n Anim pariatur cliche reprehenderit,\\n enim eiusmod high life accusamus terry richardson ad squid. Nihil\\n anim keffiyeh helvetica, craft beer labore wes anderson cred\\n nesciunt sapiente ea proident.\\n \\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';\\n\\nconst Example = () => (\\n \\n \\n Toggle\\n \\n \\n \\n \\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt magni, voluptas debitis\\n similique porro a molestias consequuntur earum odio officiis natus, amet hic, iste sed\\n dignissimos esse fuga! Minus, alias.\\n \\n \\n \\n
\\n);\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\nimport CarouselExample from '../examples/Carousel';\nconst CarouselExampleSource = require('!!raw-loader!../examples/Carousel');\nimport CarouselUncontrolledExample from '../examples/CarouselUncontrolled';\nconst CarouselUncontrolledExampleSource = require('!!raw-loader!../examples/CarouselUncontrolled');\nimport CarouselCustomTagExample from '../examples/CarouselCustomTag';\nconst CarouselCustomTagExampleSource = require('!!raw-loader!../examples/CarouselCustomTag');\n\nexport default class CarouselPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n \n {CarouselExampleSource}\n \n \n\n
Carousel Properties \n
\n \n{`Carousel.propTypes = {\n // the current active slide of the carousel\n activeIndex: PropTypes.number,\n // a function which should advance the carousel to the next slide (via activeIndex)\n next: PropTypes.func.isRequired,\n // a function which should advance the carousel to the previous slide (via activeIndex)\n previous: PropTypes.func.isRequired,\n // controls if the left and right arrow keys should control the carousel\n keyboard: PropTypes.bool,\n /* If set to \"hover\", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on\n * mouseleave. If set to false, hovering over the carousel won't pause it. (default: \"hover\")\n */\n pause: PropTypes.oneOf(['hover', false]),\n // Autoplays the carousel after the user manually cycles the first item. If \"carousel\", autoplays the carousel on load.\n // This is how bootstrap defines it... I would prefer a bool named autoplay or something...\n ride: PropTypes.oneOf(['carousel']),\n // the interval at which the carousel automatically cycles (default: 5000)\n // If set to false, carousel will not Autoplay (i.e. will not automatically cycle).\n interval: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.string,\n PropTypes.bool,\n ]),\n children: PropTypes.array,\n // called when the mouse enters the Carousel\n mouseEnter: PropTypes.func,\n // called when the mouse exits the Carousel\n mouseLeave: PropTypes.func,\n // controls whether the slide animation on the Carousel works or not\n slide: PropTypes.bool,\n cssModule: PropTypes.object,\n // controls whether the touch gestures on the Carousel works or not (default: true)\n enableTouch: PropTypes.bool,\n};`}\n \n \n\n
CarouselItem Properties \n
\n \n{`CarouselItem.propTypes = {\n ...Transition.propTypes,\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n in: PropTypes.bool,\n cssModule: PropTypes.object,\n children: PropTypes.node,\n slide: PropTypes.bool,\n};`}\n \n \n\n
CarouselControl Properties \n
\n \n{`CarouselControl.propTypes = {\n direction: PropTypes.oneOf(['prev', 'next']).isRequired,\n onClickHandler: PropTypes.func.isRequired,\n cssModule: PropTypes.object,\n directionText: PropTypes.string\n};`}\n \n \n\n
CarouselIndicators Properties \n
\n \n{`CarouselIndicators.propTypes = {\n items: PropTypes.array.isRequired,\n activeIndex: PropTypes.number.isRequired,\n cssModule: PropTypes.object,\n onClickHandler: PropTypes.func.isRequired\n};`}\n \n \n\n
CarouselCaption Properties \n
\n \n{`CarouselCaption.propTypes = {\n captionHeader: PropTypes.node,\n captionText: PropTypes.node.isRequired,\n cssModule: PropTypes.object\n};`}\n \n \n\n
Uncontrolled Carousel \n
\n For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledCarousel does not require previous, next nor activeIndex props to work.\n Anything provided to a normal Carousel can also be provided to UncontrolledCarousel, overriding the control UncontrolledCarousel provides. Additionally, you can hide the controls by passing false to the controls prop\n and you can disable the indicators by passing false to the indicators prop; both are visible by default. Autoplay (ride=\"carousel\") is enabled by default, you can disable it by passing false to the autoPlay prop.\n
\n
\n
\n
\n \n {CarouselUncontrolledExampleSource}\n \n \n\n
Uncontrolled Carousel Properties \n
Same as Carousel (except children) can be overridden plus the following
\n
\n \n{`UncontrolledCarousel.propTypes = {\n items: PropTypes.array.isRequired,\n indicators: PropTypes.bool, // default: true\n controls: PropTypes.bool, // default: true\n autoPlay: PropTypes.bool, // default: true\n};`}\n \n \n\n
Carousel using a tag and classname \n
\n
\n
\n \n {CarouselCustomTagExampleSource}\n \n \n
setAnimating(true)}\n onExited={() => setAnimating(false)}\n key={item.src}\n >\n \n setAnimating(true)}\n onExited={() => setAnimating(false)}\n >\n \n \n \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React, { useState } from 'react';\\nimport {\\n Carousel,\\n CarouselItem,\\n CarouselControl,\\n CarouselIndicators,\\n CarouselCaption\\n} from 'reactstrap';\\n\\nconst items = [\\n {\\n src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',\\n altText: 'Slide 1',\\n caption: 'Slide 1'\\n },\\n {\\n src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',\\n altText: 'Slide 2',\\n caption: 'Slide 2'\\n },\\n {\\n src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',\\n altText: 'Slide 3',\\n caption: 'Slide 3'\\n }\\n];\\n\\nconst Example = (props) => {\\n const [activeIndex, setActiveIndex] = useState(0);\\n const [animating, setAnimating] = useState(false);\\n\\n const next = () => {\\n if (animating) return;\\n const nextIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;\\n setActiveIndex(nextIndex);\\n }\\n\\n const previous = () => {\\n if (animating) return;\\n const nextIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;\\n setActiveIndex(nextIndex);\\n }\\n\\n const goToIndex = (newIndex) => {\\n if (animating) return;\\n setActiveIndex(newIndex);\\n }\\n\\n const slides = items.map((item) => {\\n return (\\n setAnimating(true)}\\n onExited={() => setAnimating(false)}\\n key={item.src}\\n >\\n \\n setAnimating(true)}\\n onExited={() => setAnimating(false)}\\n >\\n \\n \\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\nimport ListGroupExample from '../examples/ListGroup';\nimport ListGroupBadgeExample from '../examples/ListGroupBadge';\nimport ListGroupDisabledItemsExample from '../examples/ListGroupDisabledItems';\nimport ListGroupAnchorsAndButtonsExample from '../examples/ListGroupAnchorsAndButtons';\nimport ListGroupContextualClassesExample from '../examples/ListGroupContextualClasses';\nimport ListGroupCustomContentExample from '../examples/ListGroupCustomContent';\nimport ListGroupFlushExample from '../examples/ListGroupFlush';\nimport ListGroupHorizontalExample from '../examples/ListGroupHorizontal';\n\nconst ListGroupBadgeExampleSource = require('!!raw-loader!../examples/ListGroupBadge');\nconst ListGroupExampleSource = require('!!raw-loader!../examples/ListGroup');\nconst ListGroupDisabledItemsExampleSource = require('!!raw-loader!../examples/ListGroupDisabledItems');\nconst ListGroupAnchorsAndButtonsExampleSource = require('!!raw-loader!../examples/ListGroupAnchorsAndButtons');\nconst ListGroupContextualClassesExampleSource = require('!!raw-loader!../examples/ListGroupContextualClasses');\nconst ListGroupCustomContentExampleSource = require('!!raw-loader!../examples/ListGroupCustomContent');\nconst ListGroupFlushExampleSource = require('!!raw-loader!../examples/ListGroupFlush')\nconst ListGroupHorizontalExampleSource = require(\"!!raw-loader!../examples/ListGroupHorizontal\");\n\nexport default class ListGroupPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n \n {ListGroupExampleSource}\n \n \n
Properties \n
\n \n{\n `ListGroup.propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n // boolean to render list group items edge-to-edge in a parent container\n flush: PropTypes.bool,\n // boolean to render list group items horizontal. string for specific breakpoint, or true to be always horizontal\n horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n }`\n }\n \n \n\n
Tags \n
\n
\n
\n \n {ListGroupBadgeExampleSource}\n \n \n\n
Disabled items \n
\n
\n
\n \n {ListGroupDisabledItemsExampleSource}\n \n \n\n
Anchors and buttons \n
\n
Note: you need add action props to make these buttons fit the list.
\n
\n
\n
\n \n {ListGroupAnchorsAndButtonsExampleSource}\n \n \n\n
Contextual classes \n
\n
\n
\n \n {ListGroupContextualClassesExampleSource}\n \n \n\n
Custom content \n
\n
\n
\n \n {ListGroupCustomContentExampleSource}\n \n \n\n
Flush \n
\n
\n
\n \n {ListGroupFlushExampleSource}\n \n \n\n
Horizontal \n
\n
\n
\n \n {ListGroupHorizontalExampleSource}\n \n \n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n );\n\n}\n\nexport default Example;\n","import React from 'react';\nimport { ListGroup, ListGroupItem, Badge } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Cras justo odio 14 \n Dapibus ac facilisis in 2 \n Morbi leo risus 1 \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { ListGroup, ListGroupItem } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n );\n}\n\nexport default Example;\n\n","import React from 'react';\nimport { ListGroup, ListGroupItem } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n
Anchors \n
Be sure to not use the standard .btn classes here .
\n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n
\n
Buttons \n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n \n );\n\n}\n\nexport default Example;\n","import React from 'react';\nimport { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n \n List group item heading \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\n \n \n \n List group item heading \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\n \n \n \n List group item heading \n \n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\n \n \n \n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { ListGroup, ListGroupItem } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n );\n\n}\n\nexport default Example;\n","import React from 'react';\nimport { ListGroup, ListGroupItem } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n
The horizontal prop can be a Boolean or a string specifying one of Bootstrap's breakpoints
\n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n
This list group is horizontal at the lg breakpoint and up.
\n
\n Cras justo odio \n Dapibus ac facilisis in \n Morbi leo risus \n Porta ac consectetur ac \n Vestibulum at eros \n \n
Note that horizontal list groups cannot be combined with flush list groups. If flush is true then horizontal has no effect.
\n
\\n Cras justo odio 14 \\n Dapibus ac facilisis in 2 \\n Morbi leo risus 1 \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n );\\n\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n );\\n}\\n\\nexport default Example;\\n\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
Anchors \\n
Be sure to not use the standard .btn classes here .
\\n
\\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n
\\n
Buttons \\n
\\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n
\\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n \\n );\\n\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n \\n List group item heading \\n \\n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\\n \\n \\n \\n List group item heading \\n \\n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\\n \\n \\n \\n List group item heading \\n \\n Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.\\n \\n \\n \\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n );\\n\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { ListGroup, ListGroupItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
The horizontal prop can be a Boolean or a string specifying one of Bootstrap's breakpoints
\\n
\\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n
This list group is horizontal at the lg breakpoint and up.
\\n
\\n Cras justo odio \\n Dapibus ac facilisis in \\n Morbi leo risus \\n Porta ac consectetur ac \\n Vestibulum at eros \\n \\n
Note that horizontal list groups cannot be combined with flush list groups. If flush is true then horizontal has no effect.
\\n
\n
\n
\n
\n
\n \n {ListUnstyledExampleSource}\n \n \n\n
Inline \n
\n
\n
\n \n {ListInlineExampleSource}\n \n \n\n
List Properties \n
\n \n{\n`List.propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object,\n type: PropTypes.string\n};`\n }\n \n \n
ListInlineItem Properties \n
\n \n{\n`ListInlineItem.propTypes = {\n tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),\n className: PropTypes.string,\n cssModule: PropTypes.object\n};`\n }\n \n \n
\n Lorem ipsum \n Phasellus iaculis \n Nulla volutpat \n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { List } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n Lorem ipsum dolor sit amet \n Consectetur adipiscing elit \n Integer molestie lorem at massa \n Facilisis in pretium nisl aliquet \n Nulla volutpat aliquam velit\n \n Phasellus iaculis neque \n Purus sodales ultricies \n Vestibulum laoreet porttitor sem \n Ac tristique libero volutpat at \n \n \n Faucibus porta lacus fringilla vel \n Aenean sit amet erat nunc \n Eget porttitor lorem \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { List, ListInlineItem } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Lorem ipsum \\n Phasellus iaculis \\n Nulla volutpat \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { List } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n Lorem ipsum dolor sit amet \\n Consectetur adipiscing elit \\n Integer molestie lorem at massa \\n Facilisis in pretium nisl aliquet \\n Nulla volutpat aliquam velit\\n \\n Phasellus iaculis neque \\n Purus sodales ultricies \\n Vestibulum laoreet porttitor sem \\n Ac tristique libero volutpat at \\n \\n \\n Faucibus porta lacus fringilla vel \\n Aenean sit amet erat nunc \\n Eget porttitor lorem \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","import React from 'react';\nimport { PrismCode } from 'react-prism';\nimport { Spinner } from 'reactstrap';\nimport PageTitle from '../UI/PageTitle';\nimport SectionTitle from '../UI/SectionTitle';\n\nimport SpinnerExample from '../examples/Spinner';\n\nimport SpinnerGrowerExample from '../examples/SpinnerGrower';\nconst SpinnerExampleSource = require('!!raw-loader!../examples/Spinner');\nconst SpinnerGrowerExampleSource = require('!!raw-loader!../examples/SpinnerGrower');\nexport default class SpinnersPage extends React.Component {\n render() {\n return (\n \n
\n
\n
\n
\n {SpinnerExampleSource} \n \n
Properties \n
\n \n {`Spinner.propTypes = {\n type: PropTypes.string, // default: 'border'\n size: PropTypes.string,\n color: PropTypes.string,\n className: PropTypes.string,\n cssModule: PropTypes.object,\n children: PropTypes.string, // default: 'Loading...'\n};\n`}\n \n \n
Growing Spinner \n
\n
\n
\n \n {SpinnerGrowerExampleSource}\n \n \n
Sizes \n
\n
\n
\n \n {` \n \n
\n
\n
\n \n {` \n \n
\n
\n );\n}\n\nexport default Example;\n","import React from 'react';\nimport { Spinner } from 'reactstrap';\n\nconst Example = (props) => {\n return (\n \n
\n );\n}\n\nexport default Example;\n","module.exports = \"import React from 'react';\\nimport { Spinner } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","module.exports = \"import React from 'react';\\nimport { Spinner } from 'reactstrap';\\n\\nconst Example = (props) => {\\n return (\\n \\n
\\n );\\n}\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0, import/newline-after-import: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\n\nimport ClearfixExample from '../examples/Clearfix';\nconst ClearfixExampleSource = require('!!raw-loader!../examples/Clearfix');\n\nexport default function ClearfixPage() {\n return (\n \n
\n
\n Easily clear floats by adding\n {' '}.clearfix{' '}\n to the parent element .\n Utilizes \n the micro clearfix as popularized by Nicolas Gallagher.\n Can also be used as a mixin.\n
...
\n \n
\n
\n
\n \n {ClearfixExampleSource}\n \n \n
\n Example Button floated left \n Example Button floated right \n
\n );\n};\n\nexport default Example;\n","module.exports = \"import React from 'react';\\n\\nconst Example = () => {\\n return (\\n \\n Example Button floated left \\n Example Button floated right \\n
\\n );\\n};\\n\\nexport default Example;\\n\"","/* eslint react/no-multi-comp: 0, react/prop-types: 0, import/newline-after-import: 0 */\nimport React from 'react';\nimport { PrismCode } from 'react-prism';\nimport PageTitle from '../UI/PageTitle';\n\nimport ColorExample from '../examples/Color';\nconst ColorExampleSource = require('!!raw-loader!../examples/Color');\n\nexport default function ColorsPage() {\n return (\n \n
\n
\n Convey meaning through color with a handful of emphasis utility\n classes. These may also be applied to links and will darken on hover\n just like our default link styles.\n
\n
\n
\n
\n \n {ColorExampleSource}\n \n \n
\n
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
\n
Nullam id dolor id nibh ultricies vehicula ut id elit.
\n
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
\n
Maecenas sed diam eget risus varius blandit sit amet non magna.
\n
Etiam porta sem malesuada magna mollis euismod.
\n
Donec ullamcorper nulla non metus auctor fringilla.
\n
Etiam porta sem malesuada ultricies vehicula.
\n
\\n
Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.
\\n
Nullam id dolor id nibh ultricies vehicula ut id elit.
\\n
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
\\n
Maecenas sed diam eget risus varius blandit sit amet non magna.
\\n
Etiam porta sem malesuada magna mollis euismod.
\\n
Donec ullamcorper nulla non metus auctor fringilla.
\\n
Etiam porta sem malesuada ultricies vehicula.
\\n
\n
\n
\n \n \n \n
\n 404 - Not Found \n \n Can't find what you're looking for? Open up an issue.\n
\n \n Get Started \n View Components \n
\n \n
\n \n \n
\n );\n }\n}\n\nexport default Carbon;\n","import React from 'react';\nimport Content from '../UI/Content';\n\nconst items = [\n {\n name: 'Colors',\n to: '/utilities/colors/'\n },\n {\n name: 'Clearfix',\n to: '/utilities/clearfix/'\n }\n];\n\nfunction Utilities(props) {\n return (\n \n
\n );\n};\n","import React from 'react';\n\nexport default function Banner() {\n return (\n \n Black Lives Matter. \n \n Support the Equal Justice Initiative.\n \n \n );\n}\n","/*!\n\nHolder - client side image placeholders\nVersion 2.9.9+jl7z\n© 2021 Ivan Malopinsky - https://imsky.co\n\nSite: http://holderjs.com\nIssues: https://github.com/imsky/holder/issues\nLicense: MIT\n\n*/\n(function (window) {\n if (!window.document) return;\n var document = window.document;\n\n //https://github.com/inexorabletash/polyfill/blob/master/web.js\n if (!document.querySelectorAll) {\n document.querySelectorAll = function (selectors) {\n var style = document.createElement('style'), elements = [], element;\n document.documentElement.firstChild.appendChild(style);\n document._qsa = [];\n\n style.styleSheet.cssText = selectors + '{x-qsa:expression(document._qsa && document._qsa.push(this))}';\n window.scrollBy(0, 0);\n style.parentNode.removeChild(style);\n\n while (document._qsa.length) {\n element = document._qsa.shift();\n element.style.removeAttribute('x-qsa');\n elements.push(element);\n }\n document._qsa = null;\n return elements;\n };\n }\n\n if (!document.querySelector) {\n document.querySelector = function (selectors) {\n var elements = document.querySelectorAll(selectors);\n return (elements.length) ? elements[0] : null;\n };\n }\n\n if (!document.getElementsByClassName) {\n document.getElementsByClassName = function (classNames) {\n classNames = String(classNames).replace(/^|\\s+/g, '.');\n return document.querySelectorAll(classNames);\n };\n }\n\n //https://github.com/inexorabletash/polyfill\n // ES5 15.2.3.14 Object.keys ( O )\n // https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Object/keys\n if (!Object.keys) {\n Object.keys = function (o) {\n if (o !== Object(o)) { throw TypeError('Object.keys called on non-object'); }\n var ret = [], p;\n for (p in o) {\n if (Object.prototype.hasOwnProperty.call(o, p)) {\n ret.push(p);\n }\n }\n return ret;\n };\n }\n\n // ES5 15.4.4.18 Array.prototype.forEach ( callbackfn [ , thisArg ] )\n // From https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach\n if (!Array.prototype.forEach) {\n Array.prototype.forEach = function (fun /*, thisp */) {\n if (this === void 0 || this === null) { throw TypeError(); }\n\n var t = Object(this);\n var len = t.length >>> 0;\n if (typeof fun !== \"function\") { throw TypeError(); }\n\n var thisp = arguments[1], i;\n for (i = 0; i < len; i++) {\n if (i in t) {\n fun.call(thisp, t[i], i, t);\n }\n }\n };\n }\n\n //https://github.com/inexorabletash/polyfill/blob/master/web.js\n (function (global) {\n var B64_ALPHABET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';\n global.atob = global.atob || function (input) {\n input = String(input);\n var position = 0,\n output = [],\n buffer = 0, bits = 0, n;\n\n input = input.replace(/\\s/g, '');\n if ((input.length % 4) === 0) { input = input.replace(/=+$/, ''); }\n if ((input.length % 4) === 1) { throw Error('InvalidCharacterError'); }\n if (/[^+/0-9A-Za-z]/.test(input)) { throw Error('InvalidCharacterError'); }\n\n while (position < input.length) {\n n = B64_ALPHABET.indexOf(input.charAt(position));\n buffer = (buffer << 6) | n;\n bits += 6;\n\n if (bits === 24) {\n output.push(String.fromCharCode((buffer >> 16) & 0xFF));\n output.push(String.fromCharCode((buffer >> 8) & 0xFF));\n output.push(String.fromCharCode(buffer & 0xFF));\n bits = 0;\n buffer = 0;\n }\n position += 1;\n }\n\n if (bits === 12) {\n buffer = buffer >> 4;\n output.push(String.fromCharCode(buffer & 0xFF));\n } else if (bits === 18) {\n buffer = buffer >> 2;\n output.push(String.fromCharCode((buffer >> 8) & 0xFF));\n output.push(String.fromCharCode(buffer & 0xFF));\n }\n\n return output.join('');\n };\n\n global.btoa = global.btoa || function (input) {\n input = String(input);\n var position = 0,\n out = [],\n o1, o2, o3,\n e1, e2, e3, e4;\n\n if (/[^\\x00-\\xFF]/.test(input)) { throw Error('InvalidCharacterError'); }\n\n while (position < input.length) {\n o1 = input.charCodeAt(position++);\n o2 = input.charCodeAt(position++);\n o3 = input.charCodeAt(position++);\n\n // 111111 112222 222233 333333\n e1 = o1 >> 2;\n e2 = ((o1 & 0x3) << 4) | (o2 >> 4);\n e3 = ((o2 & 0xf) << 2) | (o3 >> 6);\n e4 = o3 & 0x3f;\n\n if (position === input.length + 2) {\n e3 = 64; e4 = 64;\n }\n else if (position === input.length + 1) {\n e4 = 64;\n }\n\n out.push(B64_ALPHABET.charAt(e1),\n B64_ALPHABET.charAt(e2),\n B64_ALPHABET.charAt(e3),\n B64_ALPHABET.charAt(e4));\n }\n\n return out.join('');\n };\n }(window));\n\n //https://gist.github.com/jimeh/332357\n if (!Object.prototype.hasOwnProperty){\n /*jshint -W001, -W103 */\n Object.prototype.hasOwnProperty = function(prop) {\n var proto = this.__proto__ || this.constructor.prototype;\n return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);\n };\n /*jshint +W001, +W103 */\n }\n\n // @license http://opensource.org/licenses/MIT\n // copyright Paul Irish 2015\n\n\n // Date.now() is supported everywhere except IE8. For IE8 we use the Date.now polyfill\n // github.com/Financial-Times/polyfill-service/blob/master/polyfills/Date.now/polyfill.js\n // as Safari 6 doesn't have support for NavigationTiming, we use a Date.now() timestamp for relative values\n\n // if you want values similar to what you'd get with real perf.now, place this towards the head of the page\n // but in reality, you're just getting the delta between now() calls, so it's not terribly important where it's placed\n\n\n (function(){\n\n if ('performance' in window === false) {\n window.performance = {};\n }\n \n Date.now = (Date.now || function () { // thanks IE8\n return new Date().getTime();\n });\n\n if ('now' in window.performance === false){\n \n var nowOffset = Date.now();\n \n if (performance.timing && performance.timing.navigationStart){\n nowOffset = performance.timing.navigationStart;\n }\n\n window.performance.now = function now(){\n return Date.now() - nowOffset;\n };\n }\n\n })();\n\n //requestAnimationFrame polyfill for older Firefox/Chrome versions\n if (!window.requestAnimationFrame) {\n if (window.webkitRequestAnimationFrame && window.webkitCancelAnimationFrame) {\n //https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/requestAnimationFrame/polyfill-webkit.js\n (function (global) {\n global.requestAnimationFrame = function (callback) {\n return webkitRequestAnimationFrame(function () {\n callback(global.performance.now());\n });\n };\n\n global.cancelAnimationFrame = global.webkitCancelAnimationFrame;\n }(window));\n } else if (window.mozRequestAnimationFrame && window.mozCancelAnimationFrame) {\n //https://github.com/Financial-Times/polyfill-service/blob/master/polyfills/requestAnimationFrame/polyfill-moz.js\n (function (global) {\n global.requestAnimationFrame = function (callback) {\n return mozRequestAnimationFrame(function () {\n callback(global.performance.now());\n });\n };\n\n global.cancelAnimationFrame = global.mozCancelAnimationFrame;\n }(window));\n } else {\n (function (global) {\n global.requestAnimationFrame = function (callback) {\n return global.setTimeout(callback, 1000 / 60);\n };\n\n global.cancelAnimationFrame = global.clearTimeout;\n })(window);\n }\n }\n})(this);\n\n(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine([], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"Holder\"] = factory();\n\telse\n\t\troot[\"Holder\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n\n\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"\";\n\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/*\n\tHolder.js - client side image placeholders\n\t(c) 2012-2020 Ivan Malopinsky - https://imsky.co\n\t*/\n\n\tmodule.exports = __webpack_require__(1);\n\n\n/***/ }),\n/* 1 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/* WEBPACK VAR INJECTION */(function(global) {/*\n\tHolder.js - client side image placeholders\n\t(c) 2012-2020 Ivan Malopinsky - http://imsky.co\n\t*/\n\n\t//Libraries and functions\n\tvar onDomReady = __webpack_require__(2);\n\tvar querystring = __webpack_require__(3);\n\n\tvar SceneGraph = __webpack_require__(6);\n\tvar utils = __webpack_require__(7);\n\tvar SVG = __webpack_require__(8);\n\tvar DOM = __webpack_require__(9);\n\tvar Color = __webpack_require__(10);\n\tvar constants = __webpack_require__(11);\n\n\tvar svgRenderer = __webpack_require__(12);\n\tvar sgCanvasRenderer = __webpack_require__(27);\n\n\tvar extend = utils.extend;\n\tvar dimensionCheck = utils.dimensionCheck;\n\n\t//Constants and definitions\n\tvar SVG_NS = constants.svg_ns;\n\n\tvar Holder = {\n\t version: constants.version,\n\n\t /**\n\t * Adds a theme to default settings\n\t *\n\t * @param {string} name Theme name\n\t * @param {Object} theme Theme object, with foreground, background, size, font, and fontweight properties.\n\t */\n\t addTheme: function(name, theme) {\n\t name != null && theme != null && (App.settings.themes[name] = theme);\n\t delete App.vars.cache.themeKeys;\n\t return this;\n\t },\n\n\t /**\n\t * Appends a placeholder to an element\n\t *\n\t * @param {string} src Placeholder URL string\n\t * @param el A selector or a reference to a DOM node\n\t */\n\t addImage: function(src, el) {\n\t //todo: use jquery fallback if available for all QSA references\n\t var nodes = DOM.getNodeArray(el);\n\t nodes.forEach(function (node) {\n\t var img = DOM.newEl('img');\n\t var domProps = {};\n\t domProps[App.setup.dataAttr] = src;\n\t DOM.setAttr(img, domProps);\n\t node.appendChild(img);\n\t });\n\t return this;\n\t },\n\n\t /**\n\t * Sets whether or not an image is updated on resize.\n\t * If an image is set to be updated, it is immediately rendered.\n\t *\n\t * @param {Object} el Image DOM element\n\t * @param {Boolean} value Resizable update flag value\n\t */\n\t setResizeUpdate: function(el, value) {\n\t if (el.holderData) {\n\t el.holderData.resizeUpdate = !!value;\n\t if (el.holderData.resizeUpdate) {\n\t updateResizableElements(el);\n\t }\n\t }\n\t },\n\n\t /**\n\t * Runs Holder with options. By default runs Holder on all images with \"holder.js\" in their source attributes.\n\t *\n\t * @param {Object} userOptions Options object, can contain domain, themes, images, and bgnodes properties\n\t */\n\t run: function(userOptions) {\n\t //todo: split processing into separate queues\n\t userOptions = userOptions || {};\n\t var engineSettings = {};\n\t var options = extend(App.settings, userOptions);\n\n\t App.vars.preempted = true;\n\t App.vars.dataAttr = options.dataAttr || App.setup.dataAttr;\n\n\t engineSettings.renderer = options.renderer ? options.renderer : App.setup.renderer;\n\t if (App.setup.renderers.join(',').indexOf(engineSettings.renderer) === -1) {\n\t engineSettings.renderer = App.setup.supportsSVG ? 'svg' : (App.setup.supportsCanvas ? 'canvas' : 'html');\n\t }\n\n\t var images = DOM.getNodeArray(options.images);\n\t var bgnodes = DOM.getNodeArray(options.bgnodes);\n\t var stylenodes = DOM.getNodeArray(options.stylenodes);\n\t var objects = DOM.getNodeArray(options.objects);\n\n\t engineSettings.stylesheets = [];\n\t engineSettings.svgXMLStylesheet = true;\n\t engineSettings.noFontFallback = !!options.noFontFallback;\n\t engineSettings.noBackgroundSize = !!options.noBackgroundSize;\n\n\t stylenodes.forEach(function (styleNode) {\n\t if (styleNode.attributes.rel && styleNode.attributes.href && styleNode.attributes.rel.value == 'stylesheet') {\n\t var href = styleNode.attributes.href.value;\n\t //todo: write isomorphic relative-to-absolute URL function\n\t var proxyLink = DOM.newEl('a');\n\t proxyLink.href = href;\n\t var stylesheetURL = proxyLink.protocol + '//' + proxyLink.host + proxyLink.pathname + proxyLink.search;\n\t engineSettings.stylesheets.push(stylesheetURL);\n\t }\n\t });\n\n\t bgnodes.forEach(function (bgNode) {\n\t //Skip processing background nodes if getComputedStyle is unavailable, since only modern browsers would be able to use canvas or SVG to render to background\n\t if (!global.getComputedStyle) return;\n\t var backgroundImage = global.getComputedStyle(bgNode, null).getPropertyValue('background-image');\n\t var dataBackgroundImage = bgNode.getAttribute('data-background-src');\n\t var rawURL = dataBackgroundImage || backgroundImage;\n\n\t var holderURL = null;\n\t var holderString = options.domain + '/';\n\t var holderStringIndex = rawURL.indexOf(holderString);\n\n\t if (holderStringIndex === 0) {\n\t holderURL = rawURL;\n\t } else if (holderStringIndex === 1 && rawURL[0] === '?') {\n\t holderURL = rawURL.slice(1);\n\t } else {\n\t var fragment = rawURL.substr(holderStringIndex).match(/([^\"]*)\"?\\)/);\n\t if (fragment !== null) {\n\t holderURL = fragment[1];\n\t } else if (rawURL.indexOf('url(') === 0) {\n\t throw 'Holder: unable to parse background URL: ' + rawURL;\n\t }\n\t }\n\n\t if (holderURL) {\n\t var holderFlags = parseURL(holderURL, options);\n\t if (holderFlags) {\n\t prepareDOMElement({\n\t mode: 'background',\n\t el: bgNode,\n\t flags: holderFlags,\n\t engineSettings: engineSettings\n\t });\n\t }\n\t }\n\t });\n\n\t objects.forEach(function (object) {\n\t var objectAttr = {};\n\n\t try {\n\t objectAttr.data = object.getAttribute('data');\n\t objectAttr.dataSrc = object.getAttribute(App.vars.dataAttr);\n\t } catch (e) {\n\t objectAttr.error = e;\n\t }\n\n\t var objectHasSrcURL = objectAttr.data != null && objectAttr.data.indexOf(options.domain) === 0;\n\t var objectHasDataSrcURL = objectAttr.dataSrc != null && objectAttr.dataSrc.indexOf(options.domain) === 0;\n\n\t if (objectHasSrcURL) {\n\t prepareImageElement(options, engineSettings, objectAttr.data, object);\n\t } else if (objectHasDataSrcURL) {\n\t prepareImageElement(options, engineSettings, objectAttr.dataSrc, object);\n\t }\n\t });\n\n\t images.forEach(function (image) {\n\t var imageAttr = {};\n\n\t try {\n\t imageAttr.src = image.getAttribute('src');\n\t imageAttr.dataSrc = image.getAttribute(App.vars.dataAttr);\n\t imageAttr.rendered = image.getAttribute('data-holder-rendered');\n\t } catch (e) {\n\t imageAttr.error = e;\n\t }\n\n\t var imageHasSrc = imageAttr.src != null;\n\t var imageHasDataSrcURL = imageAttr.dataSrc != null && imageAttr.dataSrc.indexOf(options.domain) === 0;\n\t var imageRendered = imageAttr.rendered != null && imageAttr.rendered == 'true';\n\n\t if (imageHasSrc) {\n\t if (imageAttr.src.indexOf(options.domain) === 0) {\n\t prepareImageElement(options, engineSettings, imageAttr.src, image);\n\t } else if (imageHasDataSrcURL) {\n\t //Image has a valid data-src and an invalid src\n\t if (imageRendered) {\n\t //If the placeholder has already been render, re-render it\n\t prepareImageElement(options, engineSettings, imageAttr.dataSrc, image);\n\t } else {\n\t //If the placeholder has not been rendered, check if the image exists and render a fallback if it doesn't\n\t (function(src, options, engineSettings, dataSrc, image) {\n\t utils.imageExists(src, function(exists) {\n\t if (!exists) {\n\t prepareImageElement(options, engineSettings, dataSrc, image);\n\t }\n\t });\n\t })(imageAttr.src, options, engineSettings, imageAttr.dataSrc, image);\n\t }\n\t }\n\t } else if (imageHasDataSrcURL) {\n\t prepareImageElement(options, engineSettings, imageAttr.dataSrc, image);\n\t }\n\t });\n\n\t return this;\n\t }\n\t};\n\n\tvar App = {\n\t settings: {\n\t domain: 'holder.js',\n\t images: 'img',\n\t objects: 'object',\n\t bgnodes: 'body .holderjs',\n\t stylenodes: 'head link.holderjs',\n\t themes: {\n\t 'gray': {\n\t bg: '#EEEEEE',\n\t fg: '#AAAAAA'\n\t },\n\t 'social': {\n\t bg: '#3a5a97',\n\t fg: '#FFFFFF'\n\t },\n\t 'industrial': {\n\t bg: '#434A52',\n\t fg: '#C2F200'\n\t },\n\t 'sky': {\n\t bg: '#0D8FDB',\n\t fg: '#FFFFFF'\n\t },\n\t 'vine': {\n\t bg: '#39DBAC',\n\t fg: '#1E292C'\n\t },\n\t 'lava': {\n\t bg: '#F8591A',\n\t fg: '#1C2846'\n\t }\n\t }\n\t },\n\t defaults: {\n\t size: 10,\n\t units: 'pt',\n\t scale: 1 / 16\n\t }\n\t};\n\n\t/**\n\t * Processes provided source attribute and sets up the appropriate rendering workflow\n\t *\n\t * @private\n\t * @param options Instance options from Holder.run\n\t * @param renderSettings Instance configuration\n\t * @param src Image URL\n\t * @param el Image DOM element\n\t */\n\tfunction prepareImageElement(options, engineSettings, src, el) {\n\t var holderFlags = parseURL(src.substr(src.lastIndexOf(options.domain)), options);\n\t if (holderFlags) {\n\t prepareDOMElement({\n\t mode: null,\n\t el: el,\n\t flags: holderFlags,\n\t engineSettings: engineSettings\n\t });\n\t }\n\t}\n\n\t/**\n\t * Processes a Holder URL and extracts configuration from query string\n\t *\n\t * @private\n\t * @param url URL\n\t * @param instanceOptions Instance options from Holder.run\n\t */\n\tfunction parseURL(url, instanceOptions) {\n\t var holder = {\n\t theme: extend(App.settings.themes.gray, null),\n\t stylesheets: instanceOptions.stylesheets,\n\t instanceOptions: instanceOptions\n\t };\n\n\t var firstQuestionMark = url.indexOf('?');\n\t var parts = [url];\n\n\t if (firstQuestionMark !== -1) {\n\t parts = [url.slice(0, firstQuestionMark), url.slice(firstQuestionMark + 1)];\n\t }\n\n\t var basics = parts[0].split('/');\n\n\t holder.holderURL = url;\n\n\t var dimensions = basics[1];\n\t var dimensionData = dimensions.match(/([\\d]+p?)x([\\d]+p?)/);\n\n\t if (!dimensionData) return false;\n\n\t holder.fluid = dimensions.indexOf('p') !== -1;\n\n\t holder.dimensions = {\n\t width: dimensionData[1].replace('p', '%'),\n\t height: dimensionData[2].replace('p', '%')\n\t };\n\n\t if (parts.length === 2) {\n\t var options = querystring.parse(parts[1]);\n\n\t // Dimensions\n\n\t if (utils.truthy(options.ratio)) {\n\t holder.fluid = true;\n\t var ratioWidth = parseFloat(holder.dimensions.width.replace('%', ''));\n\t var ratioHeight = parseFloat(holder.dimensions.height.replace('%', ''));\n\n\t ratioHeight = Math.floor(100 * (ratioHeight / ratioWidth));\n\t ratioWidth = 100;\n\n\t holder.dimensions.width = ratioWidth + '%';\n\t holder.dimensions.height = ratioHeight + '%';\n\t }\n\n\t holder.auto = utils.truthy(options.auto);\n\n\t // Colors\n\n\t if (options.bg) {\n\t holder.theme.bg = utils.parseColor(options.bg);\n\t }\n\n\t if (options.fg) {\n\t holder.theme.fg = utils.parseColor(options.fg);\n\t }\n\n\t //todo: add automatic foreground to themes without foreground\n\t if (options.bg && !options.fg) {\n\t holder.autoFg = true;\n\t }\n\n\t if (options.theme && Object.prototype.hasOwnProperty.call(holder.instanceOptions.themes, options.theme)) {\n\t holder.theme = extend(holder.instanceOptions.themes[options.theme], null);\n\t }\n\n\t // Text\n\n\t if (options.text) {\n\t holder.text = options.text;\n\t }\n\n\t if (options.textmode) {\n\t holder.textmode = options.textmode;\n\t }\n\n\t if (options.size && parseFloat(options.size)) {\n\t holder.size = parseFloat(options.size);\n\t }\n\n\t if (options.fixedSize != null) {\n\t holder.fixedSize = utils.truthy(options.fixedSize);\n\t }\n\n\t if (options.font) {\n\t holder.font = options.font;\n\t }\n\n\t if (options.align) {\n\t holder.align = options.align;\n\t }\n\n\t if (options.lineWrap) {\n\t holder.lineWrap = options.lineWrap;\n\t }\n\n\t holder.nowrap = utils.truthy(options.nowrap);\n\n\t // Miscellaneous\n\n\t holder.outline = utils.truthy(options.outline);\n\n\t if (utils.truthy(options.random)) {\n\t App.vars.cache.themeKeys = App.vars.cache.themeKeys || Object.keys(holder.instanceOptions.themes);\n\t var _theme = App.vars.cache.themeKeys[0 | Math.random() * App.vars.cache.themeKeys.length];\n\t holder.theme = extend(holder.instanceOptions.themes[_theme], null);\n\t }\n\t }\n\n\t return holder;\n\t}\n\n\t/**\n\t * Modifies the DOM to fit placeholders and sets up resizable image callbacks (for fluid and automatically sized placeholders)\n\t *\n\t * @private\n\t * @param settings DOM prep settings\n\t */\n\tfunction prepareDOMElement(prepSettings) {\n\t var mode = prepSettings.mode;\n\t var el = prepSettings.el;\n\t var flags = prepSettings.flags;\n\t var _engineSettings = prepSettings.engineSettings;\n\t var dimensions = flags.dimensions,\n\t theme = flags.theme;\n\t var dimensionsCaption = dimensions.width + 'x' + dimensions.height;\n\t mode = mode == null ? (flags.fluid ? 'fluid' : 'image') : mode;\n\t var holderTemplateRe = /holder_([a-z]+)/g;\n\t var dimensionsInText = false;\n\n\t if (flags.text != null) {\n\t theme.text = flags.text;\n\n\t // SVG embedding doesn't parse Unicode properly\n\t if (el.nodeName.toLowerCase() === 'object') {\n\t var textLines = theme.text.split('\\\\n');\n\t for (var k = 0; k < textLines.length; k++) {\n\t textLines[k] = utils.encodeHtmlEntity(textLines[k]);\n\t }\n\t theme.text = textLines.join('\\\\n');\n\t }\n\t }\n\n\t if (theme.text) {\n\t var holderTemplateMatches = theme.text.match(holderTemplateRe);\n\n\t if (holderTemplateMatches !== null) {\n\t //todo: optimize template replacement\n\t holderTemplateMatches.forEach(function (match) {\n\t if (match === 'holder_dimensions') {\n\t theme.text = theme.text.replace(match, dimensionsCaption);\n\t }\n\t });\n\t }\n\t }\n\n\t var holderURL = flags.holderURL;\n\t var engineSettings = extend(_engineSettings, null);\n\n\t if (flags.font) {\n\t /*\n\t If external fonts are used in a or to use the canvas renderer.\n\t */\n\t theme.font = flags.font;\n\t if (!engineSettings.noFontFallback && el.nodeName.toLowerCase() === 'img' && App.setup.supportsCanvas && engineSettings.renderer === 'svg') {\n\t engineSettings = extend(engineSettings, {\n\t renderer: 'canvas'\n\t });\n\t }\n\t }\n\n\t //Chrome and Opera require a quick 10ms re-render if web fonts are used with canvas\n\t if (flags.font && engineSettings.renderer == 'canvas') {\n\t engineSettings.reRender = true;\n\t }\n\n\t if (mode == 'background') {\n\t if (el.getAttribute('data-background-src') == null) {\n\t DOM.setAttr(el, {\n\t 'data-background-src': holderURL\n\t });\n\t }\n\t } else {\n\t var domProps = {};\n\t domProps[App.vars.dataAttr] = holderURL;\n\t DOM.setAttr(el, domProps);\n\t }\n\n\t flags.theme = theme;\n\n\t //todo consider using all renderSettings in holderData\n\t el.holderData = {\n\t flags: flags,\n\t engineSettings: engineSettings\n\t };\n\n\t if (mode == 'image' || mode == 'fluid') {\n\t DOM.setAttr(el, {\n\t 'alt': theme.text ? (dimensionsInText ? theme.text : theme.text + ' [' + dimensionsCaption + ']') : dimensionsCaption\n\t });\n\t }\n\n\t var renderSettings = {\n\t mode: mode,\n\t el: el,\n\t holderSettings: {\n\t dimensions: dimensions,\n\t theme: theme,\n\t flags: flags\n\t },\n\t engineSettings: engineSettings\n\t };\n\n\t if (mode == 'image') {\n\t if (!flags.auto) {\n\t el.style.width = dimensions.width + 'px';\n\t el.style.height = dimensions.height + 'px';\n\t }\n\n\t if (engineSettings.renderer == 'html') {\n\t el.style.backgroundColor = theme.bg;\n\t } else {\n\t render(renderSettings);\n\n\t if (flags.textmode == 'exact') {\n\t el.holderData.resizeUpdate = true;\n\t App.vars.resizableImages.push(el);\n\t updateResizableElements(el);\n\t }\n\t }\n\t } else if (mode == 'background' && engineSettings.renderer != 'html') {\n\t render(renderSettings);\n\t } else if (mode == 'fluid') {\n\t el.holderData.resizeUpdate = true;\n\n\t if (dimensions.height.slice(-1) == '%') {\n\t el.style.height = dimensions.height;\n\t } else if (flags.auto == null || !flags.auto) {\n\t el.style.height = dimensions.height + 'px';\n\t }\n\t if (dimensions.width.slice(-1) == '%') {\n\t el.style.width = dimensions.width;\n\t } else if (flags.auto == null || !flags.auto) {\n\t el.style.width = dimensions.width + 'px';\n\t }\n\t if (el.style.display == 'inline' || el.style.display === '' || el.style.display == 'none') {\n\t el.style.display = 'block';\n\t }\n\n\t setInitialDimensions(el);\n\n\t if (engineSettings.renderer == 'html') {\n\t el.style.backgroundColor = theme.bg;\n\t } else {\n\t App.vars.resizableImages.push(el);\n\t updateResizableElements(el);\n\t }\n\t }\n\t}\n\n\t/**\n\t * Core function that takes output from renderers and sets it as the source or background-image of the target element\n\t *\n\t * @private\n\t * @param renderSettings Renderer settings\n\t */\n\tfunction render(renderSettings) {\n\t var image = null;\n\t var mode = renderSettings.mode;\n\t var el = renderSettings.el;\n\t var holderSettings = renderSettings.holderSettings;\n\t var engineSettings = renderSettings.engineSettings;\n\n\t switch (engineSettings.renderer) {\n\t case 'svg':\n\t if (!App.setup.supportsSVG) return;\n\t break;\n\t case 'canvas':\n\t if (!App.setup.supportsCanvas) return;\n\t break;\n\t default:\n\t return;\n\t }\n\n\t //todo: move generation of scene up to flag generation to reduce extra object creation\n\t var scene = {\n\t width: holderSettings.dimensions.width,\n\t height: holderSettings.dimensions.height,\n\t theme: holderSettings.theme,\n\t flags: holderSettings.flags\n\t };\n\n\t var sceneGraph = buildSceneGraph(scene);\n\n\t function getRenderedImage() {\n\t var image = null;\n\t switch (engineSettings.renderer) {\n\t case 'canvas':\n\t image = sgCanvasRenderer(sceneGraph, renderSettings);\n\t break;\n\t case 'svg':\n\t image = svgRenderer(sceneGraph, renderSettings);\n\t break;\n\t default:\n\t throw 'Holder: invalid renderer: ' + engineSettings.renderer;\n\t }\n\n\t return image;\n\t }\n\n\t image = getRenderedImage();\n\n\t if (image == null) {\n\t throw 'Holder: couldn\\'t render placeholder';\n\t }\n\n\t //todo: add canvas rendering\n\t if (mode == 'background') {\n\t el.style.backgroundImage = 'url(' + image + ')';\n\n\t if (!engineSettings.noBackgroundSize) {\n\t el.style.backgroundSize = scene.width + 'px ' + scene.height + 'px';\n\t }\n\t } else {\n\t if (el.nodeName.toLowerCase() === 'img') {\n\t DOM.setAttr(el, {\n\t 'src': image\n\t });\n\t } else if (el.nodeName.toLowerCase() === 'object') {\n\t DOM.setAttr(el, {\n\t 'data': image,\n\t 'type': 'image/svg+xml'\n\t });\n\t }\n\t if (engineSettings.reRender) {\n\t global.setTimeout(function () {\n\t var image = getRenderedImage();\n\t if (image == null) {\n\t throw 'Holder: couldn\\'t render placeholder';\n\t }\n\t //todo: refactor this code into a function\n\t if (el.nodeName.toLowerCase() === 'img') {\n\t DOM.setAttr(el, {\n\t 'src': image\n\t });\n\t } else if (el.nodeName.toLowerCase() === 'object') {\n\t DOM.setAttr(el, {\n\t 'data': image,\n\t 'type': 'image/svg+xml'\n\t });\n\t }\n\t }, 150);\n\t }\n\t }\n\t //todo: account for re-rendering\n\t DOM.setAttr(el, {\n\t 'data-holder-rendered': true\n\t });\n\t}\n\n\t/**\n\t * Core function that takes a Holder scene description and builds a scene graph\n\t *\n\t * @private\n\t * @param scene Holder scene object\n\t */\n\t//todo: make this function reusable\n\t//todo: merge app defaults and setup properties into the scene argument\n\tfunction buildSceneGraph(scene) {\n\t var fontSize = App.defaults.size;\n\t var fixedSize = scene.flags.fixedSize != null ? scene.flags.fixedSize : scene.theme.fixedSize;\n\t if (parseFloat(scene.theme.size)) {\n\t fontSize = scene.theme.size;\n\t } else if (parseFloat(scene.flags.size)) {\n\t fontSize = scene.flags.size;\n\t }\n\n\t scene.font = {\n\t family: scene.theme.font ? scene.theme.font : 'Arial, Helvetica, Open Sans, sans-serif',\n\t size: fixedSize ? fontSize : textSize(scene.width, scene.height, fontSize, App.defaults.scale),\n\t units: scene.theme.units ? scene.theme.units : App.defaults.units,\n\t weight: scene.theme.fontweight ? scene.theme.fontweight : 'bold'\n\t };\n\n\t scene.text = scene.theme.text || Math.floor(scene.width) + 'x' + Math.floor(scene.height);\n\n\t scene.noWrap = scene.theme.nowrap || scene.flags.nowrap;\n\n\t scene.align = scene.theme.align || scene.flags.align || 'center';\n\n\t switch (scene.flags.textmode) {\n\t case 'literal':\n\t scene.text = scene.flags.dimensions.width + 'x' + scene.flags.dimensions.height;\n\t break;\n\t case 'exact':\n\t if (!scene.flags.exactDimensions) break;\n\t scene.text = Math.floor(scene.flags.exactDimensions.width) + 'x' + Math.floor(scene.flags.exactDimensions.height);\n\t break;\n\t }\n\n\t var lineWrap = scene.flags.lineWrap || App.setup.lineWrapRatio;\n\t var sceneMargin = scene.width * lineWrap;\n\t var maxLineWidth = sceneMargin;\n\n\t var sceneGraph = new SceneGraph({\n\t width: scene.width,\n\t height: scene.height\n\t });\n\n\t var Shape = sceneGraph.Shape;\n\n\t var holderBg = new Shape.Rect('holderBg', {\n\t fill: scene.theme.bg\n\t });\n\n\t holderBg.resize(scene.width, scene.height);\n\t sceneGraph.root.add(holderBg);\n\n\t if (scene.flags.outline) {\n\t var outlineColor = new Color(holderBg.properties.fill);\n\t outlineColor = outlineColor.lighten(outlineColor.lighterThan('7f7f7f') ? -0.1 : 0.1);\n\t holderBg.properties.outline = {\n\t fill: outlineColor.toHex(true),\n\t width: 2\n\t };\n\t }\n\n\t var holderTextColor = scene.theme.fg;\n\n\t if (scene.flags.autoFg) {\n\t var holderBgColor = new Color(holderBg.properties.fill);\n\t var lightColor = new Color('fff');\n\t var darkColor = new Color('000', {\n\t 'alpha': 0.285714\n\t });\n\n\t holderTextColor = holderBgColor.blendAlpha(holderBgColor.lighterThan('7f7f7f') ? darkColor : lightColor).toHex(true);\n\t }\n\n\t var holderTextGroup = new Shape.Group('holderTextGroup', {\n\t text: scene.text,\n\t align: scene.align,\n\t font: scene.font,\n\t fill: holderTextColor\n\t });\n\n\t holderTextGroup.moveTo(null, null, 1);\n\t sceneGraph.root.add(holderTextGroup);\n\n\t var tpdata = holderTextGroup.textPositionData = stagingRenderer(sceneGraph);\n\t if (!tpdata) {\n\t throw 'Holder: staging fallback not supported yet.';\n\t }\n\t holderTextGroup.properties.leading = tpdata.boundingBox.height;\n\n\t var textNode = null;\n\t var line = null;\n\n\t function finalizeLine(parent, line, width, height) {\n\t line.width = width;\n\t line.height = height;\n\t parent.width = Math.max(parent.width, line.width);\n\t parent.height += line.height;\n\t }\n\n\t if (tpdata.lineCount > 1) {\n\t var offsetX = 0;\n\t var offsetY = 0;\n\t var lineIndex = 0;\n\t var lineKey;\n\t line = new Shape.Group('line' + lineIndex);\n\n\t //Double margin so that left/right-aligned next is not flush with edge of image\n\t if (scene.align === 'left' || scene.align === 'right') {\n\t maxLineWidth = scene.width * (1 - (1 - lineWrap) * 2);\n\t }\n\n\t for (var i = 0; i < tpdata.words.length; i++) {\n\t var word = tpdata.words[i];\n\t textNode = new Shape.Text(word.text);\n\t var newline = word.text == '\\\\n';\n\t if (!scene.noWrap && (offsetX + word.width >= maxLineWidth || newline === true)) {\n\t finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);\n\t holderTextGroup.add(line);\n\t offsetX = 0;\n\t offsetY += holderTextGroup.properties.leading;\n\t lineIndex += 1;\n\t line = new Shape.Group('line' + lineIndex);\n\t line.y = offsetY;\n\t }\n\t if (newline === true) {\n\t continue;\n\t }\n\t textNode.moveTo(offsetX, 0);\n\t offsetX += tpdata.spaceWidth + word.width;\n\t line.add(textNode);\n\t }\n\n\t finalizeLine(holderTextGroup, line, offsetX, holderTextGroup.properties.leading);\n\t holderTextGroup.add(line);\n\n\t if (scene.align === 'left') {\n\t holderTextGroup.moveTo(scene.width - sceneMargin, null, null);\n\t } else if (scene.align === 'right') {\n\t for (lineKey in holderTextGroup.children) {\n\t line = holderTextGroup.children[lineKey];\n\t line.moveTo(scene.width - line.width, null, null);\n\t }\n\n\t holderTextGroup.moveTo(0 - (scene.width - sceneMargin), null, null);\n\t } else {\n\t for (lineKey in holderTextGroup.children) {\n\t line = holderTextGroup.children[lineKey];\n\t line.moveTo((holderTextGroup.width - line.width) / 2, null, null);\n\t }\n\n\t holderTextGroup.moveTo((scene.width - holderTextGroup.width) / 2, null, null);\n\t }\n\n\t holderTextGroup.moveTo(null, (scene.height - holderTextGroup.height) / 2, null);\n\n\t //If the text exceeds vertical space, move it down so the first line is visible\n\t if ((scene.height - holderTextGroup.height) / 2 < 0) {\n\t holderTextGroup.moveTo(null, 0, null);\n\t }\n\t } else {\n\t textNode = new Shape.Text(scene.text);\n\t line = new Shape.Group('line0');\n\t line.add(textNode);\n\t holderTextGroup.add(line);\n\n\t if (scene.align === 'left') {\n\t holderTextGroup.moveTo(scene.width - sceneMargin, null, null);\n\t } else if (scene.align === 'right') {\n\t holderTextGroup.moveTo(0 - (scene.width - sceneMargin), null, null);\n\t } else {\n\t holderTextGroup.moveTo((scene.width - tpdata.boundingBox.width) / 2, null, null);\n\t }\n\n\t holderTextGroup.moveTo(null, (scene.height - tpdata.boundingBox.height) / 2, null);\n\t }\n\n\t //todo: renderlist\n\t return sceneGraph;\n\t}\n\n\t/**\n\t * Adaptive text sizing function\n\t *\n\t * @private\n\t * @param width Parent width\n\t * @param height Parent height\n\t * @param fontSize Requested text size\n\t * @param scale Proportional scale of text\n\t */\n\tfunction textSize(width, height, fontSize, scale) {\n\t var stageWidth = parseInt(width, 10);\n\t var stageHeight = parseInt(height, 10);\n\n\t var bigSide = Math.max(stageWidth, stageHeight);\n\t var smallSide = Math.min(stageWidth, stageHeight);\n\n\t var newHeight = 0.8 * Math.min(smallSide, bigSide * scale);\n\t return Math.round(Math.max(fontSize, newHeight));\n\t}\n\n\t/**\n\t * Iterates over resizable (fluid or auto) placeholders and renders them\n\t *\n\t * @private\n\t * @param element Optional element selector, specified only if a specific element needs to be re-rendered\n\t */\n\tfunction updateResizableElements(element) {\n\t var images;\n\t if (element == null || element.nodeType == null) {\n\t images = App.vars.resizableImages;\n\t } else {\n\t images = [element];\n\t }\n\t for (var i = 0, l = images.length; i < l; i++) {\n\t var el = images[i];\n\t if (el.holderData) {\n\t var flags = el.holderData.flags;\n\t var dimensions = dimensionCheck(el);\n\t if (dimensions) {\n\t if (!el.holderData.resizeUpdate) {\n\t continue;\n\t }\n\n\t if (flags.fluid && flags.auto) {\n\t var fluidConfig = el.holderData.fluidConfig;\n\t switch (fluidConfig.mode) {\n\t case 'width':\n\t dimensions.height = dimensions.width / fluidConfig.ratio;\n\t break;\n\t case 'height':\n\t dimensions.width = dimensions.height * fluidConfig.ratio;\n\t break;\n\t }\n\t }\n\n\t var settings = {\n\t mode: 'image',\n\t holderSettings: {\n\t dimensions: dimensions,\n\t theme: flags.theme,\n\t flags: flags\n\t },\n\t el: el,\n\t engineSettings: el.holderData.engineSettings\n\t };\n\n\t if (flags.textmode == 'exact') {\n\t flags.exactDimensions = dimensions;\n\t settings.holderSettings.dimensions = flags.dimensions;\n\t }\n\n\t render(settings);\n\t } else {\n\t setInvisible(el);\n\t }\n\t }\n\t }\n\t}\n\n\t/**\n\t * Sets up aspect ratio metadata for fluid placeholders, in order to preserve proportions when resizing\n\t *\n\t * @private\n\t * @param el Image DOM element\n\t */\n\tfunction setInitialDimensions(el) {\n\t if (el.holderData) {\n\t var dimensions = dimensionCheck(el);\n\t if (dimensions) {\n\t var flags = el.holderData.flags;\n\n\t var fluidConfig = {\n\t fluidHeight: flags.dimensions.height.slice(-1) == '%',\n\t fluidWidth: flags.dimensions.width.slice(-1) == '%',\n\t mode: null,\n\t initialDimensions: dimensions\n\t };\n\n\t if (fluidConfig.fluidWidth && !fluidConfig.fluidHeight) {\n\t fluidConfig.mode = 'width';\n\t fluidConfig.ratio = fluidConfig.initialDimensions.width / parseFloat(flags.dimensions.height);\n\t } else if (!fluidConfig.fluidWidth && fluidConfig.fluidHeight) {\n\t fluidConfig.mode = 'height';\n\t fluidConfig.ratio = parseFloat(flags.dimensions.width) / fluidConfig.initialDimensions.height;\n\t }\n\n\t el.holderData.fluidConfig = fluidConfig;\n\t } else {\n\t setInvisible(el);\n\t }\n\t }\n\t}\n\n\t/**\n\t * Iterates through all current invisible images, and if they're visible, renders them and removes them from further checks. Runs every animation frame.\n\t *\n\t * @private\n\t */\n\tfunction visibilityCheck() {\n\t var renderableImages = [];\n\t var keys = Object.keys(App.vars.invisibleImages);\n\t var el;\n\n\t keys.forEach(function (key) {\n\t el = App.vars.invisibleImages[key];\n\t if (dimensionCheck(el) && el.nodeName.toLowerCase() == 'img') {\n\t renderableImages.push(el);\n\t delete App.vars.invisibleImages[key];\n\t }\n\t });\n\n\t if (renderableImages.length) {\n\t Holder.run({\n\t images: renderableImages\n\t });\n\t }\n\n\t // Done to prevent 100% CPU usage via aggressive calling of requestAnimationFrame\n\t setTimeout(function () {\n\t global.requestAnimationFrame(visibilityCheck);\n\t }, 10);\n\t}\n\n\t/**\n\t * Starts checking for invisible placeholders if not doing so yet. Does nothing otherwise.\n\t *\n\t * @private\n\t */\n\tfunction startVisibilityCheck() {\n\t if (!App.vars.visibilityCheckStarted) {\n\t global.requestAnimationFrame(visibilityCheck);\n\t App.vars.visibilityCheckStarted = true;\n\t }\n\t}\n\n\t/**\n\t * Sets a unique ID for an image detected to be invisible and adds it to the map of invisible images checked by visibilityCheck\n\t *\n\t * @private\n\t * @param el Invisible DOM element\n\t */\n\tfunction setInvisible(el) {\n\t if (!el.holderData.invisibleId) {\n\t App.vars.invisibleId += 1;\n\t App.vars.invisibleImages['i' + App.vars.invisibleId] = el;\n\t el.holderData.invisibleId = App.vars.invisibleId;\n\t }\n\t}\n\n\t//todo: see if possible to convert stagingRenderer to use HTML only\n\tvar stagingRenderer = (function() {\n\t var svg = null,\n\t stagingText = null,\n\t stagingTextNode = null;\n\t return function(graph) {\n\t var rootNode = graph.root;\n\t if (App.setup.supportsSVG) {\n\t var firstTimeSetup = false;\n\t var tnode = function(text) {\n\t return document.createTextNode(text);\n\t };\n\t if (svg == null || svg.parentNode !== document.body) {\n\t firstTimeSetup = true;\n\t }\n\n\t svg = SVG.initSVG(svg, rootNode.properties.width, rootNode.properties.height);\n\t //Show staging element before staging\n\t svg.style.display = 'block';\n\n\t if (firstTimeSetup) {\n\t stagingText = DOM.newEl('text', SVG_NS);\n\t stagingTextNode = tnode(null);\n\t DOM.setAttr(stagingText, {\n\t x: 0\n\t });\n\t stagingText.appendChild(stagingTextNode);\n\t svg.appendChild(stagingText);\n\t document.body.appendChild(svg);\n\t svg.style.visibility = 'hidden';\n\t svg.style.position = 'absolute';\n\t svg.style.top = '-100%';\n\t svg.style.left = '-100%';\n\t //todo: workaround for zero-dimension tag in Opera 12\n\t //svg.setAttribute('width', 0);\n\t //svg.setAttribute('height', 0);\n\t }\n\n\t var holderTextGroup = rootNode.children.holderTextGroup;\n\t var htgProps = holderTextGroup.properties;\n\t DOM.setAttr(stagingText, {\n\t 'y': htgProps.font.size,\n\t 'style': utils.cssProps({\n\t 'font-weight': htgProps.font.weight,\n\t 'font-size': htgProps.font.size + htgProps.font.units,\n\t 'font-family': htgProps.font.family\n\t })\n\t });\n\n\t //Unescape HTML entities to get approximately the right width\n\t var txt = DOM.newEl('textarea');\n\t txt.innerHTML = htgProps.text;\n\t stagingTextNode.nodeValue = txt.value;\n\n\t //Get bounding box for the whole string (total width and height)\n\t var stagingTextBBox = stagingText.getBBox();\n\n\t //Get line count and split the string into words\n\t var lineCount = Math.ceil(stagingTextBBox.width / rootNode.properties.width);\n\t var words = htgProps.text.split(' ');\n\t var newlines = htgProps.text.match(/\\\\n/g);\n\t lineCount += newlines == null ? 0 : newlines.length;\n\n\t //Get bounding box for the string with spaces removed\n\t stagingTextNode.nodeValue = htgProps.text.replace(/[ ]+/g, '');\n\t var computedNoSpaceLength = stagingText.getComputedTextLength();\n\n\t //Compute average space width\n\t var diffLength = stagingTextBBox.width - computedNoSpaceLength;\n\t var spaceWidth = Math.round(diffLength / Math.max(1, words.length - 1));\n\n\t //Get widths for every word with space only if there is more than one line\n\t var wordWidths = [];\n\t if (lineCount > 1) {\n\t stagingTextNode.nodeValue = '';\n\t for (var i = 0; i < words.length; i++) {\n\t if (words[i].length === 0) continue;\n\t stagingTextNode.nodeValue = utils.decodeHtmlEntity(words[i]);\n\t var bbox = stagingText.getBBox();\n\t wordWidths.push({\n\t text: words[i],\n\t width: bbox.width\n\t });\n\t }\n\t }\n\n\t //Hide staging element after staging\n\t svg.style.display = 'none';\n\n\t return {\n\t spaceWidth: spaceWidth,\n\t lineCount: lineCount,\n\t boundingBox: stagingTextBBox,\n\t words: wordWidths\n\t };\n\t } else {\n\t //todo: canvas fallback for measuring text on android 2.3\n\t return false;\n\t }\n\t };\n\t})();\n\n\t//Helpers\n\n\t/**\n\t * Prevents a function from being called too often, waits until a timer elapses to call it again\n\t *\n\t * @param fn Function to call\n\t */\n\tfunction debounce(fn) {\n\t if (!App.vars.debounceTimer) fn.call(this);\n\t if (App.vars.debounceTimer) global.clearTimeout(App.vars.debounceTimer);\n\t App.vars.debounceTimer = global.setTimeout(function() {\n\t App.vars.debounceTimer = null;\n\t fn.call(this);\n\t }, App.setup.debounce);\n\t}\n\n\t/**\n\t * Holder-specific resize/orientation change callback, debounced to prevent excessive execution\n\t */\n\tfunction resizeEvent() {\n\t debounce(function() {\n\t updateResizableElements(null);\n\t });\n\t}\n\n\t//Set up flags\n\n\tfor (var flag in App.flags) {\n\t if (!Object.prototype.hasOwnProperty.call(App.flags, flag)) continue;\n\t App.flags[flag].match = function(val) {\n\t return val.match(this.regex);\n\t };\n\t}\n\n\t//Properties set once on setup\n\n\tApp.setup = {\n\t renderer: 'html',\n\t debounce: 100,\n\t ratio: 1,\n\t supportsCanvas: false,\n\t supportsSVG: false,\n\t lineWrapRatio: 0.9,\n\t dataAttr: 'data-src',\n\t renderers: ['html', 'canvas', 'svg']\n\t};\n\n\t//Properties modified during runtime\n\n\tApp.vars = {\n\t preempted: false,\n\t resizableImages: [],\n\t invisibleImages: {},\n\t invisibleId: 0,\n\t visibilityCheckStarted: false,\n\t debounceTimer: null,\n\t cache: {}\n\t};\n\n\t//Pre-flight\n\n\t(function() {\n\t var canvas = DOM.newEl('canvas');\n\n\t if (canvas.getContext) {\n\t if (canvas.toDataURL('image/png').indexOf('data:image/png') != -1) {\n\t App.setup.renderer = 'canvas';\n\t App.setup.supportsCanvas = true;\n\t }\n\t }\n\n\t if (!!document.createElementNS && !!document.createElementNS(SVG_NS, 'svg').createSVGRect) {\n\t App.setup.renderer = 'svg';\n\t App.setup.supportsSVG = true;\n\t }\n\t})();\n\n\t//Starts checking for invisible placeholders\n\tstartVisibilityCheck();\n\n\tif (onDomReady) {\n\t onDomReady(function() {\n\t if (!App.vars.preempted) {\n\t Holder.run();\n\t }\n\t if (global.addEventListener) {\n\t global.addEventListener('resize', resizeEvent, false);\n\t global.addEventListener('orientationchange', resizeEvent, false);\n\t } else {\n\t global.attachEvent('onresize', resizeEvent);\n\t }\n\n\t if (typeof global.Turbolinks == 'object') {\n\t global.document.addEventListener('page:change', function() {\n\t Holder.run();\n\t });\n\t }\n\t });\n\t}\n\n\tmodule.exports = Holder;\n\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))\n\n/***/ }),\n/* 2 */\n/***/ (function(module, exports) {\n\n\t/*!\n\t * onDomReady.js 1.4.0 (c) 2013 Tubal Martin - MIT license\n\t *\n\t * Specially modified to work with Holder.js\n\t */\n\n\tfunction _onDomReady(win) {\n\t //Lazy loading fix for Firefox < 3.6\n\t //http://webreflection.blogspot.com/2009/11/195-chars-to-help-lazy-loading.html\n\t if (document.readyState == null && document.addEventListener) {\n\t document.addEventListener(\"DOMContentLoaded\", function DOMContentLoaded() {\n\t document.removeEventListener(\"DOMContentLoaded\", DOMContentLoaded, false);\n\t document.readyState = \"complete\";\n\t }, false);\n\t document.readyState = \"loading\";\n\t }\n\t \n\t var doc = win.document,\n\t docElem = doc.documentElement,\n\t \n\t LOAD = \"load\",\n\t FALSE = false,\n\t ONLOAD = \"on\"+LOAD,\n\t COMPLETE = \"complete\",\n\t READYSTATE = \"readyState\",\n\t ATTACHEVENT = \"attachEvent\",\n\t DETACHEVENT = \"detachEvent\",\n\t ADDEVENTLISTENER = \"addEventListener\",\n\t DOMCONTENTLOADED = \"DOMContentLoaded\",\n\t ONREADYSTATECHANGE = \"onreadystatechange\",\n\t REMOVEEVENTLISTENER = \"removeEventListener\",\n\t \n\t // W3C Event model\n\t w3c = ADDEVENTLISTENER in doc,\n\t _top = FALSE,\n\t \n\t // isReady: Is the DOM ready to be used? Set to true once it occurs.\n\t isReady = FALSE,\n\t \n\t // Callbacks pending execution until DOM is ready\n\t callbacks = [];\n\t \n\t // Handle when the DOM is ready\n\t function ready( fn ) {\n\t if ( !isReady ) {\n\t \n\t // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).\n\t if ( !doc.body ) {\n\t return defer( ready );\n\t }\n\t \n\t // Remember that the DOM is ready\n\t isReady = true;\n\t \n\t // Execute all callbacks\n\t while ( fn = callbacks.shift() ) {\n\t defer( fn );\n\t }\n\t }\n\t }\n\t \n\t // The ready event handler\n\t function completed( event ) {\n\t // readyState === \"complete\" is good enough for us to call the dom ready in oldIE\n\t if ( w3c || event.type === LOAD || doc[READYSTATE] === COMPLETE ) {\n\t detach();\n\t ready();\n\t }\n\t }\n\t \n\t // Clean-up method for dom ready events\n\t function detach() {\n\t if ( w3c ) {\n\t doc[REMOVEEVENTLISTENER]( DOMCONTENTLOADED, completed, FALSE );\n\t win[REMOVEEVENTLISTENER]( LOAD, completed, FALSE );\n\t } else {\n\t doc[DETACHEVENT]( ONREADYSTATECHANGE, completed );\n\t win[DETACHEVENT]( ONLOAD, completed );\n\t }\n\t }\n\t \n\t // Defers a function, scheduling it to run after the current call stack has cleared.\n\t function defer( fn, wait ) {\n\t // Allow 0 to be passed\n\t setTimeout( fn, +wait >= 0 ? wait : 1 );\n\t }\n\t \n\t // Attach the listeners:\n\t \n\t // Catch cases where onDomReady is called after the browser event has already occurred.\n\t // we once tried to use readyState \"interactive\" here, but it caused issues like the one\n\t // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15\n\t if ( doc[READYSTATE] === COMPLETE ) {\n\t // Handle it asynchronously to allow scripts the opportunity to delay ready\n\t defer( ready );\n\t \n\t // Standards-based browsers support DOMContentLoaded\n\t } else if ( w3c ) {\n\t // Use the handy event callback\n\t doc[ADDEVENTLISTENER]( DOMCONTENTLOADED, completed, FALSE );\n\t \n\t // A fallback to window.onload, that will always work\n\t win[ADDEVENTLISTENER]( LOAD, completed, FALSE );\n\t \n\t // If IE event model is used\n\t } else {\n\t // Ensure firing before onload, maybe late but safe also for iframes\n\t doc[ATTACHEVENT]( ONREADYSTATECHANGE, completed );\n\t \n\t // A fallback to window.onload, that will always work\n\t win[ATTACHEVENT]( ONLOAD, completed );\n\t \n\t // If IE and not a frame\n\t // continually check to see if the document is ready\n\t try {\n\t _top = win.frameElement == null && docElem;\n\t } catch(e) {}\n\t \n\t if ( _top && _top.doScroll ) {\n\t (function doScrollCheck() {\n\t if ( !isReady ) {\n\t try {\n\t // Use the trick by Diego Perini\n\t // http://javascript.nwbox.com/IEContentLoaded/\n\t _top.doScroll(\"left\");\n\t } catch(e) {\n\t return defer( doScrollCheck, 50 );\n\t }\n\t \n\t // detach all dom ready events\n\t detach();\n\t \n\t // and execute any waiting functions\n\t ready();\n\t }\n\t })();\n\t }\n\t }\n\t \n\t function onDomReady( fn ) {\n\t // If DOM is ready, execute the function (async), otherwise wait\n\t isReady ? defer( fn ) : callbacks.push( fn );\n\t }\n\t \n\t // Add version\n\t onDomReady.version = \"1.4.0\";\n\t // Add method to check if DOM is ready\n\t onDomReady.isReady = function(){\n\t return isReady;\n\t };\n\n\t return onDomReady;\n\t}\n\n\tmodule.exports = typeof window !== \"undefined\" && _onDomReady(window);\n\n/***/ }),\n/* 3 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t//Modified version of component/querystring\n\t//Changes: updated dependencies, dot notation parsing, JSHint fixes\n\t//Fork at https://github.com/imsky/querystring\n\n\t/**\n\t * Module dependencies.\n\t */\n\n\tvar encode = encodeURIComponent;\n\tvar decode = decodeURIComponent;\n\tvar trim = __webpack_require__(4);\n\tvar type = __webpack_require__(5);\n\n\tvar arrayRegex = /(\\w+)\\[(\\d+)\\]/;\n\tvar objectRegex = /\\w+\\.\\w+/;\n\n\t/**\n\t * Parse the given query `str`.\n\t *\n\t * @param {String} str\n\t * @return {Object}\n\t * @api public\n\t */\n\n\texports.parse = function(str){\n\t if ('string' !== typeof str) return {};\n\n\t str = trim(str);\n\t if ('' === str) return {};\n\t if ('?' === str.charAt(0)) str = str.slice(1);\n\n\t var obj = {};\n\t var pairs = str.split('&');\n\t for (var i = 0; i < pairs.length; i++) {\n\t var parts = pairs[i].split('=');\n\t var key = decode(parts[0]);\n\t var m, ctx, prop;\n\n\t if (m = arrayRegex.exec(key)) {\n\t obj[m[1]] = obj[m[1]] || [];\n\t obj[m[1]][m[2]] = decode(parts[1]);\n\t continue;\n\t }\n\n\t if (m = objectRegex.test(key)) {\n\t m = key.split('.');\n\t ctx = obj;\n\t \n\t while (m.length) {\n\t prop = m.shift();\n\n\t if (!prop.length) continue;\n\n\t if (!ctx[prop]) {\n\t ctx[prop] = {};\n\t } else if (ctx[prop] && typeof ctx[prop] !== 'object') {\n\t break;\n\t }\n\n\t if (!m.length) {\n\t ctx[prop] = decode(parts[1]);\n\t }\n\n\t ctx = ctx[prop];\n\t }\n\n\t continue;\n\t }\n\n\t obj[parts[0]] = null == parts[1] ? '' : decode(parts[1]);\n\t }\n\n\t return obj;\n\t};\n\n\t/**\n\t * Stringify the given `obj`.\n\t *\n\t * @param {Object} obj\n\t * @return {String}\n\t * @api public\n\t */\n\n\texports.stringify = function(obj){\n\t if (!obj) return '';\n\t var pairs = [];\n\n\t for (var key in obj) {\n\t var value = obj[key];\n\n\t if ('array' == type(value)) {\n\t for (var i = 0; i < value.length; ++i) {\n\t pairs.push(encode(key + '[' + i + ']') + '=' + encode(value[i]));\n\t }\n\t continue;\n\t }\n\n\t pairs.push(encode(key) + '=' + encode(obj[key]));\n\t }\n\n\t return pairs.join('&');\n\t};\n\n\n/***/ }),\n/* 4 */\n/***/ (function(module, exports) {\n\n\t\n\texports = module.exports = trim;\n\n\tfunction trim(str){\n\t return str.replace(/^\\s*|\\s*$/g, '');\n\t}\n\n\texports.left = function(str){\n\t return str.replace(/^\\s*/, '');\n\t};\n\n\texports.right = function(str){\n\t return str.replace(/\\s*$/, '');\n\t};\n\n\n/***/ }),\n/* 5 */\n/***/ (function(module, exports) {\n\n\t/**\n\t * toString ref.\n\t */\n\n\tvar toString = Object.prototype.toString;\n\n\t/**\n\t * Return the type of `val`.\n\t *\n\t * @param {Mixed} val\n\t * @return {String}\n\t * @api public\n\t */\n\n\tmodule.exports = function(val){\n\t switch (toString.call(val)) {\n\t case '[object Date]': return 'date';\n\t case '[object RegExp]': return 'regexp';\n\t case '[object Arguments]': return 'arguments';\n\t case '[object Array]': return 'array';\n\t case '[object Error]': return 'error';\n\t }\n\n\t if (val === null) return 'null';\n\t if (val === undefined) return 'undefined';\n\t if (val !== val) return 'nan';\n\t if (val && val.nodeType === 1) return 'element';\n\n\t val = val.valueOf\n\t ? val.valueOf()\n\t : Object.prototype.valueOf.apply(val)\n\n\t return typeof val;\n\t};\n\n\n/***/ }),\n/* 6 */\n/***/ (function(module, exports) {\n\n\tvar SceneGraph = function(sceneProperties) {\n\t var nodeCount = 1;\n\n\t //todo: move merge to helpers section\n\t function merge(parent, child) {\n\t for (var prop in child) {\n\t parent[prop] = child[prop];\n\t }\n\t return parent;\n\t }\n\n\t var SceneNode = function(name) {\n\t nodeCount++;\n\t this.parent = null;\n\t this.children = {};\n\t this.id = nodeCount;\n\t this.name = 'n' + nodeCount;\n\t if (typeof name !== 'undefined') {\n\t this.name = name;\n\t }\n\t this.x = this.y = this.z = 0;\n\t this.width = this.height = 0;\n\t };\n\n\t SceneNode.prototype.resize = function(width, height) {\n\t if (width != null) {\n\t this.width = width;\n\t }\n\t if (height != null) {\n\t this.height = height;\n\t }\n\t };\n\n\t SceneNode.prototype.moveTo = function(x, y, z) {\n\t this.x = x != null ? x : this.x;\n\t this.y = y != null ? y : this.y;\n\t this.z = z != null ? z : this.z;\n\t };\n\n\t SceneNode.prototype.add = function(child) {\n\t var name = child.name;\n\t if (typeof this.children[name] === 'undefined') {\n\t this.children[name] = child;\n\t child.parent = this;\n\t } else {\n\t throw 'SceneGraph: child already exists: ' + name;\n\t }\n\t };\n\n\t var RootNode = function() {\n\t SceneNode.call(this, 'root');\n\t this.properties = sceneProperties;\n\t };\n\n\t RootNode.prototype = new SceneNode();\n\n\t var Shape = function(name, props) {\n\t SceneNode.call(this, name);\n\t this.properties = {\n\t 'fill': '#000000'\n\t };\n\t if (typeof props !== 'undefined') {\n\t merge(this.properties, props);\n\t } else if (typeof name !== 'undefined' && typeof name !== 'string') {\n\t throw 'SceneGraph: invalid node name';\n\t }\n\t };\n\n\t Shape.prototype = new SceneNode();\n\n\t var Group = function() {\n\t Shape.apply(this, arguments);\n\t this.type = 'group';\n\t };\n\n\t Group.prototype = new Shape();\n\n\t var Rect = function() {\n\t Shape.apply(this, arguments);\n\t this.type = 'rect';\n\t };\n\n\t Rect.prototype = new Shape();\n\n\t var Text = function(text) {\n\t Shape.call(this);\n\t this.type = 'text';\n\t this.properties.text = text;\n\t };\n\n\t Text.prototype = new Shape();\n\n\t var root = new RootNode();\n\n\t this.Shape = {\n\t 'Rect': Rect,\n\t 'Text': Text,\n\t 'Group': Group\n\t };\n\n\t this.root = root;\n\t return this;\n\t};\n\n\tmodule.exports = SceneGraph;\n\n\n/***/ }),\n/* 7 */\n/***/ (function(module, exports) {\n\n\t/* WEBPACK VAR INJECTION */(function(global) {/**\n\t * Shallow object clone and merge\n\t *\n\t * @param a Object A\n\t * @param b Object B\n\t * @returns {Object} New object with all of A's properties, and all of B's properties, overwriting A's properties\n\t */\n\texports.extend = function(a, b) {\n\t var c = {};\n\t for (var x in a) {\n\t if (Object.prototype.hasOwnProperty.call(a,x)) {\n\t c[x] = a[x];\n\t }\n\t }\n\t if (b != null) {\n\t for (var y in b) {\n\t if (Object.prototype.hasOwnProperty.call(b, y)) {\n\t c[y] = b[y];\n\t }\n\t }\n\t }\n\t return c;\n\t};\n\n\t/**\n\t * Takes a k/v list of CSS properties and returns a rule\n\t *\n\t * @param props CSS properties object\n\t */\n\texports.cssProps = function(props) {\n\t var ret = [];\n\t for (var p in props) {\n\t if (Object.prototype.hasOwnProperty.call(props, p)) {\n\t ret.push(p + ':' + props[p]);\n\t }\n\t }\n\t return ret.join(';');\n\t};\n\n\t/**\n\t * Encodes HTML entities in a string\n\t *\n\t * @param str Input string\n\t */\n\texports.encodeHtmlEntity = function(str) {\n\t var buf = [];\n\t var charCode = 0;\n\t for (var i = str.length - 1; i >= 0; i--) {\n\t charCode = str.charCodeAt(i);\n\t if (charCode > 128) {\n\t buf.unshift(['&#', charCode, ';'].join(''));\n\t } else {\n\t buf.unshift(str[i]);\n\t }\n\t }\n\t return buf.join('');\n\t};\n\n\t/**\n\t * Checks if an image exists\n\t *\n\t * @param src URL of image\n\t * @param callback Callback to call once image status has been found\n\t */\n\texports.imageExists = function(src, callback) {\n\t var image = new Image();\n\t image.onerror = function() {\n\t callback.call(this, false);\n\t };\n\t image.onload = function() {\n\t callback.call(this, true);\n\t };\n\t image.src = src;\n\t};\n\n\t/**\n\t * Decodes HTML entities in a string\n\t *\n\t * @param str Input string\n\t */\n\texports.decodeHtmlEntity = function(str) {\n\t return str.replace(/&#(\\d+);/g, function(match, dec) {\n\t return String.fromCharCode(dec);\n\t });\n\t};\n\n\n\t/**\n\t * Returns an element's dimensions if it's visible, `false` otherwise.\n\t *\n\t * @param el DOM element\n\t */\n\texports.dimensionCheck = function(el) {\n\t var dimensions = {\n\t height: el.clientHeight,\n\t width: el.clientWidth\n\t };\n\n\t if (dimensions.height && dimensions.width) {\n\t return dimensions;\n\t } else {\n\t return false;\n\t }\n\t};\n\n\n\t/**\n\t * Returns true if value is truthy or if it is \"semantically truthy\"\n\t * @param val\n\t */\n\texports.truthy = function(val) {\n\t if (typeof val === 'string') {\n\t return val === 'true' || val === 'yes' || val === '1' || val === 'on' || val === '✓';\n\t }\n\t return !!val;\n\t};\n\n\t/**\n\t * Parses input into a well-formed CSS color\n\t * @param val\n\t */\n\texports.parseColor = function(val) {\n\t var hexre = /(^(?:#?)[0-9a-f]{6}$)|(^(?:#?)[0-9a-f]{3}$)/i;\n\t var rgbre = /^rgb\\((\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*\\)$/;\n\t var rgbare = /^rgba\\((\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(\\d{1,3})\\s*,\\s*(0*\\.\\d{1,}|1)\\)$/;\n\n\t var match = val.match(hexre);\n\t var retval;\n\n\t if (match !== null) {\n\t retval = match[1] || match[2];\n\t if (retval[0] !== '#') {\n\t return '#' + retval;\n\t } else {\n\t return retval;\n\t }\n\t }\n\n\t match = val.match(rgbre);\n\n\t if (match !== null) {\n\t retval = 'rgb(' + match.slice(1).join(',') + ')';\n\t return retval;\n\t }\n\n\t match = val.match(rgbare);\n\n\t if (match !== null) {\n\t var normalizeAlpha = function (a) { return '0.' + a.split('.')[1]; };\n\t var fixedMatch = match.slice(1).map(function (e, i) {\n\t return (i === 3) ? normalizeAlpha(e) : e;\n\t });\n\t retval = 'rgba(' + fixedMatch.join(',') + ')';\n\t return retval;\n\t }\n\n\t return null;\n\t};\n\n\t/**\n\t * Provides the correct scaling ratio for canvas drawing operations on HiDPI screens (e.g. Retina displays)\n\t */\n\texports.canvasRatio = function () {\n\t var devicePixelRatio = 1;\n\t var backingStoreRatio = 1;\n\n\t if (global.document) {\n\t var canvas = global.document.createElement('canvas');\n\t if (canvas.getContext) {\n\t var ctx = canvas.getContext('2d');\n\t devicePixelRatio = global.devicePixelRatio || 1;\n\t backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;\n\t }\n\t }\n\n\t return devicePixelRatio / backingStoreRatio;\n\t};\n\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))\n\n/***/ }),\n/* 8 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/* WEBPACK VAR INJECTION */(function(global) {var DOM = __webpack_require__(9);\n\n\tvar SVG_NS = 'http://www.w3.org/2000/svg';\n\tvar NODE_TYPE_COMMENT = 8;\n\n\t/**\n\t * Generic SVG element creation function\n\t *\n\t * @param svg SVG context, set to null if new\n\t * @param width Document width\n\t * @param height Document height\n\t */\n\texports.initSVG = function(svg, width, height) {\n\t var defs, style, initialize = false;\n\n\t if (svg && svg.querySelector) {\n\t style = svg.querySelector('style');\n\t if (style === null) {\n\t initialize = true;\n\t }\n\t } else {\n\t svg = DOM.newEl('svg', SVG_NS);\n\t initialize = true;\n\t }\n\n\t if (initialize) {\n\t defs = DOM.newEl('defs', SVG_NS);\n\t style = DOM.newEl('style', SVG_NS);\n\t DOM.setAttr(style, {\n\t 'type': 'text/css'\n\t });\n\t defs.appendChild(style);\n\t svg.appendChild(defs);\n\t }\n\n\t //IE throws an exception if this is set and Chrome requires it to be set\n\t if (svg.webkitMatchesSelector) {\n\t svg.setAttribute('xmlns', SVG_NS);\n\t }\n\n\t //Remove comment nodes\n\t for (var i = 0; i < svg.childNodes.length; i++) {\n\t if (svg.childNodes[i].nodeType === NODE_TYPE_COMMENT) {\n\t svg.removeChild(svg.childNodes[i]);\n\t }\n\t }\n\n\t //Remove CSS\n\t while (style.childNodes.length) {\n\t style.removeChild(style.childNodes[0]);\n\t }\n\n\t DOM.setAttr(svg, {\n\t 'width': width,\n\t 'height': height,\n\t 'viewBox': '0 0 ' + width + ' ' + height,\n\t 'preserveAspectRatio': 'none'\n\t });\n\n\t return svg;\n\t};\n\n\t/**\n\t * Converts serialized SVG to a string suitable for data URI use\n\t * @param svgString Serialized SVG string\n\t * @param [base64] Use base64 encoding for data URI\n\t */\n\texports.svgStringToDataURI = function() {\n\t var rawPrefix = 'data:image/svg+xml;charset=UTF-8,';\n\t var base64Prefix = 'data:image/svg+xml;charset=UTF-8;base64,';\n\n\t return function(svgString, base64) {\n\t if (base64) {\n\t return base64Prefix + btoa(global.unescape(encodeURIComponent(svgString)));\n\t } else {\n\t return rawPrefix + encodeURIComponent(svgString);\n\t }\n\t };\n\t}();\n\n\t/**\n\t * Returns serialized SVG with XML processing instructions\n\t *\n\t * @param svg SVG context\n\t * @param stylesheets CSS stylesheets to include\n\t */\n\texports.serializeSVG = function(svg, engineSettings) {\n\t if (!global.XMLSerializer) return;\n\t var serializer = new XMLSerializer();\n\t var svgCSS = '';\n\t var stylesheets = engineSettings.stylesheets;\n\n\t //External stylesheets: Processing Instruction method\n\t if (engineSettings.svgXMLStylesheet) {\n\t var xml = DOM.createXML();\n\t //Add directives\n\t for (var i = stylesheets.length - 1; i >= 0; i--) {\n\t var csspi = xml.createProcessingInstruction('xml-stylesheet', 'href=\"' + stylesheets[i] + '\" rel=\"stylesheet\"');\n\t xml.insertBefore(csspi, xml.firstChild);\n\t }\n\n\t xml.removeChild(xml.documentElement);\n\t svgCSS = serializer.serializeToString(xml);\n\t }\n\n\t var svgText = serializer.serializeToString(svg);\n\t svgText = svgText.replace(/&(#[0-9]{2,};)/g, '&$1');\n\t return svgCSS + svgText;\n\t};\n\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))\n\n/***/ }),\n/* 9 */\n/***/ (function(module, exports) {\n\n\t/* WEBPACK VAR INJECTION */(function(global) {/**\n\t * Generic new DOM element function\n\t *\n\t * @param tag Tag to create\n\t * @param namespace Optional namespace value\n\t */\n\texports.newEl = function(tag, namespace) {\n\t if (!global.document) return;\n\n\t if (namespace == null) {\n\t return global.document.createElement(tag);\n\t } else {\n\t return global.document.createElementNS(namespace, tag);\n\t }\n\t};\n\n\t/**\n\t * Generic setAttribute function\n\t *\n\t * @param el Reference to DOM element\n\t * @param attrs Object with attribute keys and values\n\t */\n\texports.setAttr = function (el, attrs) {\n\t for (var a in attrs) {\n\t el.setAttribute(a, attrs[a]);\n\t }\n\t};\n\n\t/**\n\t * Creates a XML document\n\t * @private\n\t */\n\texports.createXML = function() {\n\t if (!global.DOMParser) return;\n\t return new DOMParser().parseFromString(' \n\t * @license MIT\n\t */\n\tfunction compare(a, b) {\n\t if (a === b) {\n\t return 0;\n\t }\n\n\t var x = a.length;\n\t var y = b.length;\n\n\t for (var i = 0, len = Math.min(x, y); i < len; ++i) {\n\t if (a[i] !== b[i]) {\n\t x = a[i];\n\t y = b[i];\n\t break;\n\t }\n\t }\n\n\t if (x < y) {\n\t return -1;\n\t }\n\t if (y < x) {\n\t return 1;\n\t }\n\t return 0;\n\t}\n\tfunction isBuffer(b) {\n\t if (global.Buffer && typeof global.Buffer.isBuffer === 'function') {\n\t return global.Buffer.isBuffer(b);\n\t }\n\t return !!(b != null && b._isBuffer);\n\t}\n\n\t// based on node assert, original notice:\n\t// NB: The URL to the CommonJS spec is kept just for tradition.\n\t// node-assert has evolved a lot since then, both in API and behavior.\n\n\t// http://wiki.commonjs.org/wiki/Unit_Testing/1.0\n\t//\n\t// THIS IS NOT TESTED NOR LIKELY TO WORK OUTSIDE V8!\n\t//\n\t// Originally from narwhal.js (http://narwhaljs.org)\n\t// Copyright (c) 2009 Thomas Robinson <280north.com>\n\t//\n\t// Permission is hereby granted, free of charge, to any person obtaining a copy\n\t// of this software and associated documentation files (the 'Software'), to\n\t// deal in the Software without restriction, including without limitation the\n\t// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or\n\t// sell copies of the Software, and to permit persons to whom the Software is\n\t// furnished to do so, subject to the following conditions:\n\t//\n\t// The above copyright notice and this permission notice shall be included in\n\t// all copies or substantial portions of the Software.\n\t//\n\t// THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\n\t// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\n\t// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\n\t// AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN\n\t// ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n\t// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\tvar util = __webpack_require__(23);\n\tvar hasOwn = Object.prototype.hasOwnProperty;\n\tvar pSlice = Array.prototype.slice;\n\tvar functionsHaveNames = (function () {\n\t return function foo() {}.name === 'foo';\n\t}());\n\tfunction pToString (obj) {\n\t return Object.prototype.toString.call(obj);\n\t}\n\tfunction isView(arrbuf) {\n\t if (isBuffer(arrbuf)) {\n\t return false;\n\t }\n\t if (typeof global.ArrayBuffer !== 'function') {\n\t return false;\n\t }\n\t if (typeof ArrayBuffer.isView === 'function') {\n\t return ArrayBuffer.isView(arrbuf);\n\t }\n\t if (!arrbuf) {\n\t return false;\n\t }\n\t if (arrbuf instanceof DataView) {\n\t return true;\n\t }\n\t if (arrbuf.buffer && arrbuf.buffer instanceof ArrayBuffer) {\n\t return true;\n\t }\n\t return false;\n\t}\n\t// 1. The assert module provides functions that throw\n\t// AssertionError's when particular conditions are not met. The\n\t// assert module must conform to the following interface.\n\n\tvar assert = module.exports = ok;\n\n\t// 2. The AssertionError is defined in assert.\n\t// new assert.AssertionError({ message: message,\n\t// actual: actual,\n\t// expected: expected })\n\n\tvar regex = /\\s*function\\s+([^\\(\\s]*)\\s*/;\n\t// based on https://github.com/ljharb/function.prototype.name/blob/adeeeec8bfcc6068b187d7d9fb3d5bb1d3a30899/implementation.js\n\tfunction getName(func) {\n\t if (!util.isFunction(func)) {\n\t return;\n\t }\n\t if (functionsHaveNames) {\n\t return func.name;\n\t }\n\t var str = func.toString();\n\t var match = str.match(regex);\n\t return match && match[1];\n\t}\n\tassert.AssertionError = function AssertionError(options) {\n\t this.name = 'AssertionError';\n\t this.actual = options.actual;\n\t this.expected = options.expected;\n\t this.operator = options.operator;\n\t if (options.message) {\n\t this.message = options.message;\n\t this.generatedMessage = false;\n\t } else {\n\t this.message = getMessage(this);\n\t this.generatedMessage = true;\n\t }\n\t var stackStartFunction = options.stackStartFunction || fail;\n\t if (Error.captureStackTrace) {\n\t Error.captureStackTrace(this, stackStartFunction);\n\t } else {\n\t // non v8 browsers so we can have a stacktrace\n\t var err = new Error();\n\t if (err.stack) {\n\t var out = err.stack;\n\n\t // try to strip useless frames\n\t var fn_name = getName(stackStartFunction);\n\t var idx = out.indexOf('\\n' + fn_name);\n\t if (idx >= 0) {\n\t // once we have located the function frame\n\t // we need to strip out everything before it (and its line)\n\t var next_line = out.indexOf('\\n', idx + 1);\n\t out = out.substring(next_line + 1);\n\t }\n\n\t this.stack = out;\n\t }\n\t }\n\t};\n\n\t// assert.AssertionError instanceof Error\n\tutil.inherits(assert.AssertionError, Error);\n\n\tfunction truncate(s, n) {\n\t if (typeof s === 'string') {\n\t return s.length < n ? s : s.slice(0, n);\n\t } else {\n\t return s;\n\t }\n\t}\n\tfunction inspect(something) {\n\t if (functionsHaveNames || !util.isFunction(something)) {\n\t return util.inspect(something);\n\t }\n\t var rawname = getName(something);\n\t var name = rawname ? ': ' + rawname : '';\n\t return '[Function' + name + ']';\n\t}\n\tfunction getMessage(self) {\n\t return truncate(inspect(self.actual), 128) + ' ' +\n\t self.operator + ' ' +\n\t truncate(inspect(self.expected), 128);\n\t}\n\n\t// At present only the three keys mentioned above are used and\n\t// understood by the spec. Implementations or sub modules can pass\n\t// other keys to the AssertionError's constructor - they will be\n\t// ignored.\n\n\t// 3. All of the following functions must throw an AssertionError\n\t// when a corresponding condition is not met, with a message that\n\t// may be undefined if not provided. All assertion methods provide\n\t// both the actual and expected values to the assertion error for\n\t// display purposes.\n\n\tfunction fail(actual, expected, message, operator, stackStartFunction) {\n\t throw new assert.AssertionError({\n\t message: message,\n\t actual: actual,\n\t expected: expected,\n\t operator: operator,\n\t stackStartFunction: stackStartFunction\n\t });\n\t}\n\n\t// EXTENSION! allows for well behaved errors defined elsewhere.\n\tassert.fail = fail;\n\n\t// 4. Pure assertion tests whether a value is truthy, as determined\n\t// by !!guard.\n\t// assert.ok(guard, message_opt);\n\t// This statement is equivalent to assert.equal(true, !!guard,\n\t// message_opt);. To test strictly for the value true, use\n\t// assert.strictEqual(true, guard, message_opt);.\n\n\tfunction ok(value, message) {\n\t if (!value) fail(value, true, message, '==', assert.ok);\n\t}\n\tassert.ok = ok;\n\n\t// 5. The equality assertion tests shallow, coercive equality with\n\t// ==.\n\t// assert.equal(actual, expected, message_opt);\n\n\tassert.equal = function equal(actual, expected, message) {\n\t if (actual != expected) fail(actual, expected, message, '==', assert.equal);\n\t};\n\n\t// 6. The non-equality assertion tests for whether two objects are not equal\n\t// with != assert.notEqual(actual, expected, message_opt);\n\n\tassert.notEqual = function notEqual(actual, expected, message) {\n\t if (actual == expected) {\n\t fail(actual, expected, message, '!=', assert.notEqual);\n\t }\n\t};\n\n\t// 7. The equivalence assertion tests a deep equality relation.\n\t// assert.deepEqual(actual, expected, message_opt);\n\n\tassert.deepEqual = function deepEqual(actual, expected, message) {\n\t if (!_deepEqual(actual, expected, false)) {\n\t fail(actual, expected, message, 'deepEqual', assert.deepEqual);\n\t }\n\t};\n\n\tassert.deepStrictEqual = function deepStrictEqual(actual, expected, message) {\n\t if (!_deepEqual(actual, expected, true)) {\n\t fail(actual, expected, message, 'deepStrictEqual', assert.deepStrictEqual);\n\t }\n\t};\n\n\tfunction _deepEqual(actual, expected, strict, memos) {\n\t // 7.1. All identical values are equivalent, as determined by ===.\n\t if (actual === expected) {\n\t return true;\n\t } else if (isBuffer(actual) && isBuffer(expected)) {\n\t return compare(actual, expected) === 0;\n\n\t // 7.2. If the expected value is a Date object, the actual value is\n\t // equivalent if it is also a Date object that refers to the same time.\n\t } else if (util.isDate(actual) && util.isDate(expected)) {\n\t return actual.getTime() === expected.getTime();\n\n\t // 7.3 If the expected value is a RegExp object, the actual value is\n\t // equivalent if it is also a RegExp object with the same source and\n\t // properties (`global`, `multiline`, `lastIndex`, `ignoreCase`).\n\t } else if (util.isRegExp(actual) && util.isRegExp(expected)) {\n\t return actual.source === expected.source &&\n\t actual.global === expected.global &&\n\t actual.multiline === expected.multiline &&\n\t actual.lastIndex === expected.lastIndex &&\n\t actual.ignoreCase === expected.ignoreCase;\n\n\t // 7.4. Other pairs that do not both pass typeof value == 'object',\n\t // equivalence is determined by ==.\n\t } else if ((actual === null || typeof actual !== 'object') &&\n\t (expected === null || typeof expected !== 'object')) {\n\t return strict ? actual === expected : actual == expected;\n\n\t // If both values are instances of typed arrays, wrap their underlying\n\t // ArrayBuffers in a Buffer each to increase performance\n\t // This optimization requires the arrays to have the same type as checked by\n\t // Object.prototype.toString (aka pToString). Never perform binary\n\t // comparisons for Float*Arrays, though, since e.g. +0 === -0 but their\n\t // bit patterns are not identical.\n\t } else if (isView(actual) && isView(expected) &&\n\t pToString(actual) === pToString(expected) &&\n\t !(actual instanceof Float32Array ||\n\t actual instanceof Float64Array)) {\n\t return compare(new Uint8Array(actual.buffer),\n\t new Uint8Array(expected.buffer)) === 0;\n\n\t // 7.5 For all other Object pairs, including Array objects, equivalence is\n\t // determined by having the same number of owned properties (as verified\n\t // with Object.prototype.hasOwnProperty.call), the same set of keys\n\t // (although not necessarily the same order), equivalent values for every\n\t // corresponding key, and an identical 'prototype' property. Note: this\n\t // accounts for both named and indexed properties on Arrays.\n\t } else if (isBuffer(actual) !== isBuffer(expected)) {\n\t return false;\n\t } else {\n\t memos = memos || {actual: [], expected: []};\n\n\t var actualIndex = memos.actual.indexOf(actual);\n\t if (actualIndex !== -1) {\n\t if (actualIndex === memos.expected.indexOf(expected)) {\n\t return true;\n\t }\n\t }\n\n\t memos.actual.push(actual);\n\t memos.expected.push(expected);\n\n\t return objEquiv(actual, expected, strict, memos);\n\t }\n\t}\n\n\tfunction isArguments(object) {\n\t return Object.prototype.toString.call(object) == '[object Arguments]';\n\t}\n\n\tfunction objEquiv(a, b, strict, actualVisitedObjects) {\n\t if (a === null || a === undefined || b === null || b === undefined)\n\t return false;\n\t // if one is a primitive, the other must be same\n\t if (util.isPrimitive(a) || util.isPrimitive(b))\n\t return a === b;\n\t if (strict && Object.getPrototypeOf(a) !== Object.getPrototypeOf(b))\n\t return false;\n\t var aIsArgs = isArguments(a);\n\t var bIsArgs = isArguments(b);\n\t if ((aIsArgs && !bIsArgs) || (!aIsArgs && bIsArgs))\n\t return false;\n\t if (aIsArgs) {\n\t a = pSlice.call(a);\n\t b = pSlice.call(b);\n\t return _deepEqual(a, b, strict);\n\t }\n\t var ka = objectKeys(a);\n\t var kb = objectKeys(b);\n\t var key, i;\n\t // having the same number of owned properties (keys incorporates\n\t // hasOwnProperty)\n\t if (ka.length !== kb.length)\n\t return false;\n\t //the same set of keys (although not necessarily the same order),\n\t ka.sort();\n\t kb.sort();\n\t //~~~cheap key test\n\t for (i = ka.length - 1; i >= 0; i--) {\n\t if (ka[i] !== kb[i])\n\t return false;\n\t }\n\t //equivalent values for every corresponding key, and\n\t //~~~possibly expensive deep test\n\t for (i = ka.length - 1; i >= 0; i--) {\n\t key = ka[i];\n\t if (!_deepEqual(a[key], b[key], strict, actualVisitedObjects))\n\t return false;\n\t }\n\t return true;\n\t}\n\n\t// 8. The non-equivalence assertion tests for any deep inequality.\n\t// assert.notDeepEqual(actual, expected, message_opt);\n\n\tassert.notDeepEqual = function notDeepEqual(actual, expected, message) {\n\t if (_deepEqual(actual, expected, false)) {\n\t fail(actual, expected, message, 'notDeepEqual', assert.notDeepEqual);\n\t }\n\t};\n\n\tassert.notDeepStrictEqual = notDeepStrictEqual;\n\tfunction notDeepStrictEqual(actual, expected, message) {\n\t if (_deepEqual(actual, expected, true)) {\n\t fail(actual, expected, message, 'notDeepStrictEqual', notDeepStrictEqual);\n\t }\n\t}\n\n\n\t// 9. The strict equality assertion tests strict equality, as determined by ===.\n\t// assert.strictEqual(actual, expected, message_opt);\n\n\tassert.strictEqual = function strictEqual(actual, expected, message) {\n\t if (actual !== expected) {\n\t fail(actual, expected, message, '===', assert.strictEqual);\n\t }\n\t};\n\n\t// 10. The strict non-equality assertion tests for strict inequality, as\n\t// determined by !==. assert.notStrictEqual(actual, expected, message_opt);\n\n\tassert.notStrictEqual = function notStrictEqual(actual, expected, message) {\n\t if (actual === expected) {\n\t fail(actual, expected, message, '!==', assert.notStrictEqual);\n\t }\n\t};\n\n\tfunction expectedException(actual, expected) {\n\t if (!actual || !expected) {\n\t return false;\n\t }\n\n\t if (Object.prototype.toString.call(expected) == '[object RegExp]') {\n\t return expected.test(actual);\n\t }\n\n\t try {\n\t if (actual instanceof expected) {\n\t return true;\n\t }\n\t } catch (e) {\n\t // Ignore. The instanceof check doesn't work for arrow functions.\n\t }\n\n\t if (Error.isPrototypeOf(expected)) {\n\t return false;\n\t }\n\n\t return expected.call({}, actual) === true;\n\t}\n\n\tfunction _tryBlock(block) {\n\t var error;\n\t try {\n\t block();\n\t } catch (e) {\n\t error = e;\n\t }\n\t return error;\n\t}\n\n\tfunction _throws(shouldThrow, block, expected, message) {\n\t var actual;\n\n\t if (typeof block !== 'function') {\n\t throw new TypeError('\"block\" argument must be a function');\n\t }\n\n\t if (typeof expected === 'string') {\n\t message = expected;\n\t expected = null;\n\t }\n\n\t actual = _tryBlock(block);\n\n\t message = (expected && expected.name ? ' (' + expected.name + ').' : '.') +\n\t (message ? ' ' + message : '.');\n\n\t if (shouldThrow && !actual) {\n\t fail(actual, expected, 'Missing expected exception' + message);\n\t }\n\n\t var userProvidedMessage = typeof message === 'string';\n\t var isUnwantedException = !shouldThrow && util.isError(actual);\n\t var isUnexpectedException = !shouldThrow && actual && !expected;\n\n\t if ((isUnwantedException &&\n\t userProvidedMessage &&\n\t expectedException(actual, expected)) ||\n\t isUnexpectedException) {\n\t fail(actual, expected, 'Got unwanted exception' + message);\n\t }\n\n\t if ((shouldThrow && actual && expected &&\n\t !expectedException(actual, expected)) || (!shouldThrow && actual)) {\n\t throw actual;\n\t }\n\t}\n\n\t// 11. Expected to throw an error:\n\t// assert.throws(block, Error_opt, message_opt);\n\n\tassert.throws = function(block, /*optional*/error, /*optional*/message) {\n\t _throws(true, block, error, message);\n\t};\n\n\t// EXTENSION! This is annoying to write outside this module.\n\tassert.doesNotThrow = function(block, /*optional*/error, /*optional*/message) {\n\t _throws(false, block, error, message);\n\t};\n\n\tassert.ifError = function(err) { if (err) throw err; };\n\n\t// Expose a strict only variant of assert\n\tfunction strict(value, message) {\n\t if (!value) fail(value, true, message, '==', strict);\n\t}\n\tassert.strict = objectAssign(strict, assert, {\n\t equal: assert.strictEqual,\n\t deepEqual: assert.deepStrictEqual,\n\t notEqual: assert.notStrictEqual,\n\t notDeepEqual: assert.notDeepStrictEqual\n\t});\n\tassert.strict.strict = assert.strict;\n\n\tvar objectKeys = Object.keys || function (obj) {\n\t var keys = [];\n\t for (var key in obj) {\n\t if (hasOwn.call(obj, key)) keys.push(key);\n\t }\n\t return keys;\n\t};\n\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))\n\n/***/ }),\n/* 22 */\n/***/ (function(module, exports) {\n\n\t/*\n\tobject-assign\n\t(c) Sindre Sorhus\n\t@license MIT\n\t*/\n\n\t'use strict';\n\t/* eslint-disable no-unused-vars */\n\tvar getOwnPropertySymbols = Object.getOwnPropertySymbols;\n\tvar hasOwnProperty = Object.prototype.hasOwnProperty;\n\tvar propIsEnumerable = Object.prototype.propertyIsEnumerable;\n\n\tfunction toObject(val) {\n\t\tif (val === null || val === undefined) {\n\t\t\tthrow new TypeError('Object.assign cannot be called with null or undefined');\n\t\t}\n\n\t\treturn Object(val);\n\t}\n\n\tfunction shouldUseNative() {\n\t\ttry {\n\t\t\tif (!Object.assign) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Detect buggy property enumeration order in older V8 versions.\n\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=4118\n\t\t\tvar test1 = new String('abc'); // eslint-disable-line no-new-wrappers\n\t\t\ttest1[5] = 'de';\n\t\t\tif (Object.getOwnPropertyNames(test1)[0] === '5') {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\t\tvar test2 = {};\n\t\t\tfor (var i = 0; i < 10; i++) {\n\t\t\t\ttest2['_' + String.fromCharCode(i)] = i;\n\t\t\t}\n\t\t\tvar order2 = Object.getOwnPropertyNames(test2).map(function (n) {\n\t\t\t\treturn test2[n];\n\t\t\t});\n\t\t\tif (order2.join('') !== '0123456789') {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// https://bugs.chromium.org/p/v8/issues/detail?id=3056\n\t\t\tvar test3 = {};\n\t\t\t'abcdefghijklmnopqrst'.split('').forEach(function (letter) {\n\t\t\t\ttest3[letter] = letter;\n\t\t\t});\n\t\t\tif (Object.keys(Object.assign({}, test3)).join('') !==\n\t\t\t\t\t'abcdefghijklmnopqrst') {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\treturn true;\n\t\t} catch (err) {\n\t\t\t// We don't expect any of the above to throw, but better to be safe.\n\t\t\treturn false;\n\t\t}\n\t}\n\n\tmodule.exports = shouldUseNative() ? Object.assign : function (target, source) {\n\t\tvar from;\n\t\tvar to = toObject(target);\n\t\tvar symbols;\n\n\t\tfor (var s = 1; s < arguments.length; s++) {\n\t\t\tfrom = Object(arguments[s]);\n\n\t\t\tfor (var key in from) {\n\t\t\t\tif (hasOwnProperty.call(from, key)) {\n\t\t\t\t\tto[key] = from[key];\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif (getOwnPropertySymbols) {\n\t\t\t\tsymbols = getOwnPropertySymbols(from);\n\t\t\t\tfor (var i = 0; i < symbols.length; i++) {\n\t\t\t\t\tif (propIsEnumerable.call(from, symbols[i])) {\n\t\t\t\t\t\tto[symbols[i]] = from[symbols[i]];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn to;\n\t};\n\n\n/***/ }),\n/* 23 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\t/* WEBPACK VAR INJECTION */(function(global, process) {// Copyright Joyent, Inc. and other Node contributors.\n\t//\n\t// Permission is hereby granted, free of charge, to any person obtaining a\n\t// copy of this software and associated documentation files (the\n\t// \"Software\"), to deal in the Software without restriction, including\n\t// without limitation the rights to use, copy, modify, merge, publish,\n\t// distribute, sublicense, and/or sell copies of the Software, and to permit\n\t// persons to whom the Software is furnished to do so, subject to the\n\t// following conditions:\n\t//\n\t// The above copyright notice and this permission notice shall be included\n\t// in all copies or substantial portions of the Software.\n\t//\n\t// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n\t// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n\t// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n\t// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n\t// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n\t// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n\t// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n\tvar formatRegExp = /%[sdj%]/g;\n\texports.format = function(f) {\n\t if (!isString(f)) {\n\t var objects = [];\n\t for (var i = 0; i < arguments.length; i++) {\n\t objects.push(inspect(arguments[i]));\n\t }\n\t return objects.join(' ');\n\t }\n\n\t var i = 1;\n\t var args = arguments;\n\t var len = args.length;\n\t var str = String(f).replace(formatRegExp, function(x) {\n\t if (x === '%%') return '%';\n\t if (i >= len) return x;\n\t switch (x) {\n\t case '%s': return String(args[i++]);\n\t case '%d': return Number(args[i++]);\n\t case '%j':\n\t try {\n\t return JSON.stringify(args[i++]);\n\t } catch (_) {\n\t return '[Circular]';\n\t }\n\t default:\n\t return x;\n\t }\n\t });\n\t for (var x = args[i]; i < len; x = args[++i]) {\n\t if (isNull(x) || !isObject(x)) {\n\t str += ' ' + x;\n\t } else {\n\t str += ' ' + inspect(x);\n\t }\n\t }\n\t return str;\n\t};\n\n\n\t// Mark that a method should not be used.\n\t// Returns a modified function which warns once by default.\n\t// If --no-deprecation is set, then it is a no-op.\n\texports.deprecate = function(fn, msg) {\n\t // Allow for deprecating things in the process of starting up.\n\t if (isUndefined(global.process)) {\n\t return function() {\n\t return exports.deprecate(fn, msg).apply(this, arguments);\n\t };\n\t }\n\n\t if (process.noDeprecation === true) {\n\t return fn;\n\t }\n\n\t var warned = false;\n\t function deprecated() {\n\t if (!warned) {\n\t if (process.throwDeprecation) {\n\t throw new Error(msg);\n\t } else if (process.traceDeprecation) {\n\t console.trace(msg);\n\t } else {\n\t console.error(msg);\n\t }\n\t warned = true;\n\t }\n\t return fn.apply(this, arguments);\n\t }\n\n\t return deprecated;\n\t};\n\n\n\tvar debugs = {};\n\tvar debugEnviron;\n\texports.debuglog = function(set) {\n\t if (isUndefined(debugEnviron))\n\t debugEnviron = process.env.NODE_DEBUG || '';\n\t set = set.toUpperCase();\n\t if (!debugs[set]) {\n\t if (new RegExp('\\\\b' + set + '\\\\b', 'i').test(debugEnviron)) {\n\t var pid = process.pid;\n\t debugs[set] = function() {\n\t var msg = exports.format.apply(exports, arguments);\n\t console.error('%s %d: %s', set, pid, msg);\n\t };\n\t } else {\n\t debugs[set] = function() {};\n\t }\n\t }\n\t return debugs[set];\n\t};\n\n\n\t/**\n\t * Echos the value of a value. Trys to print the value out\n\t * in the best way possible given the different types.\n\t *\n\t * @param {Object} obj The object to print out.\n\t * @param {Object} opts Optional options object that alters the output.\n\t */\n\t/* legacy: obj, showHidden, depth, colors*/\n\tfunction inspect(obj, opts) {\n\t // default options\n\t var ctx = {\n\t seen: [],\n\t stylize: stylizeNoColor\n\t };\n\t // legacy...\n\t if (arguments.length >= 3) ctx.depth = arguments[2];\n\t if (arguments.length >= 4) ctx.colors = arguments[3];\n\t if (isBoolean(opts)) {\n\t // legacy...\n\t ctx.showHidden = opts;\n\t } else if (opts) {\n\t // got an \"options\" object\n\t exports._extend(ctx, opts);\n\t }\n\t // set default options\n\t if (isUndefined(ctx.showHidden)) ctx.showHidden = false;\n\t if (isUndefined(ctx.depth)) ctx.depth = 2;\n\t if (isUndefined(ctx.colors)) ctx.colors = false;\n\t if (isUndefined(ctx.customInspect)) ctx.customInspect = true;\n\t if (ctx.colors) ctx.stylize = stylizeWithColor;\n\t return formatValue(ctx, obj, ctx.depth);\n\t}\n\texports.inspect = inspect;\n\n\n\t// http://en.wikipedia.org/wiki/ANSI_escape_code#graphics\n\tinspect.colors = {\n\t 'bold' : [1, 22],\n\t 'italic' : [3, 23],\n\t 'underline' : [4, 24],\n\t 'inverse' : [7, 27],\n\t 'white' : [37, 39],\n\t 'grey' : [90, 39],\n\t 'black' : [30, 39],\n\t 'blue' : [34, 39],\n\t 'cyan' : [36, 39],\n\t 'green' : [32, 39],\n\t 'magenta' : [35, 39],\n\t 'red' : [31, 39],\n\t 'yellow' : [33, 39]\n\t};\n\n\t// Don't use 'blue' not visible on cmd.exe\n\tinspect.styles = {\n\t 'special': 'cyan',\n\t 'number': 'yellow',\n\t 'boolean': 'yellow',\n\t 'undefined': 'grey',\n\t 'null': 'bold',\n\t 'string': 'green',\n\t 'date': 'magenta',\n\t // \"name\": intentionally not styling\n\t 'regexp': 'red'\n\t};\n\n\n\tfunction stylizeWithColor(str, styleType) {\n\t var style = inspect.styles[styleType];\n\n\t if (style) {\n\t return '\\u001b[' + inspect.colors[style][0] + 'm' + str +\n\t '\\u001b[' + inspect.colors[style][1] + 'm';\n\t } else {\n\t return str;\n\t }\n\t}\n\n\n\tfunction stylizeNoColor(str, styleType) {\n\t return str;\n\t}\n\n\n\tfunction arrayToHash(array) {\n\t var hash = {};\n\n\t array.forEach(function(val, idx) {\n\t hash[val] = true;\n\t });\n\n\t return hash;\n\t}\n\n\n\tfunction formatValue(ctx, value, recurseTimes) {\n\t // Provide a hook for user-specified inspect functions.\n\t // Check that value is an object with an inspect function on it\n\t if (ctx.customInspect &&\n\t value &&\n\t isFunction(value.inspect) &&\n\t // Filter out the util module, it's inspect function is special\n\t value.inspect !== exports.inspect &&\n\t // Also filter out any prototype objects using the circular check.\n\t !(value.constructor && value.constructor.prototype === value)) {\n\t var ret = value.inspect(recurseTimes, ctx);\n\t if (!isString(ret)) {\n\t ret = formatValue(ctx, ret, recurseTimes);\n\t }\n\t return ret;\n\t }\n\n\t // Primitive types cannot have properties\n\t var primitive = formatPrimitive(ctx, value);\n\t if (primitive) {\n\t return primitive;\n\t }\n\n\t // Look up the keys of the object.\n\t var keys = Object.keys(value);\n\t var visibleKeys = arrayToHash(keys);\n\n\t if (ctx.showHidden) {\n\t keys = Object.getOwnPropertyNames(value);\n\t }\n\n\t // IE doesn't make error fields non-enumerable\n\t // http://msdn.microsoft.com/en-us/library/ie/dww52sbt(v=vs.94).aspx\n\t if (isError(value)\n\t && (keys.indexOf('message') >= 0 || keys.indexOf('description') >= 0)) {\n\t return formatError(value);\n\t }\n\n\t // Some type of object without properties can be shortcutted.\n\t if (keys.length === 0) {\n\t if (isFunction(value)) {\n\t var name = value.name ? ': ' + value.name : '';\n\t return ctx.stylize('[Function' + name + ']', 'special');\n\t }\n\t if (isRegExp(value)) {\n\t return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');\n\t }\n\t if (isDate(value)) {\n\t return ctx.stylize(Date.prototype.toString.call(value), 'date');\n\t }\n\t if (isError(value)) {\n\t return formatError(value);\n\t }\n\t }\n\n\t var base = '', array = false, braces = ['{', '}'];\n\n\t // Make Array say that they are Array\n\t if (isArray(value)) {\n\t array = true;\n\t braces = ['[', ']'];\n\t }\n\n\t // Make functions say that they are functions\n\t if (isFunction(value)) {\n\t var n = value.name ? ': ' + value.name : '';\n\t base = ' [Function' + n + ']';\n\t }\n\n\t // Make RegExps say that they are RegExps\n\t if (isRegExp(value)) {\n\t base = ' ' + RegExp.prototype.toString.call(value);\n\t }\n\n\t // Make dates with properties first say the date\n\t if (isDate(value)) {\n\t base = ' ' + Date.prototype.toUTCString.call(value);\n\t }\n\n\t // Make error with message first say the error\n\t if (isError(value)) {\n\t base = ' ' + formatError(value);\n\t }\n\n\t if (keys.length === 0 && (!array || value.length == 0)) {\n\t return braces[0] + base + braces[1];\n\t }\n\n\t if (recurseTimes < 0) {\n\t if (isRegExp(value)) {\n\t return ctx.stylize(RegExp.prototype.toString.call(value), 'regexp');\n\t } else {\n\t return ctx.stylize('[Object]', 'special');\n\t }\n\t }\n\n\t ctx.seen.push(value);\n\n\t var output;\n\t if (array) {\n\t output = formatArray(ctx, value, recurseTimes, visibleKeys, keys);\n\t } else {\n\t output = keys.map(function(key) {\n\t return formatProperty(ctx, value, recurseTimes, visibleKeys, key, array);\n\t });\n\t }\n\n\t ctx.seen.pop();\n\n\t return reduceToSingleString(output, base, braces);\n\t}\n\n\n\tfunction formatPrimitive(ctx, value) {\n\t if (isUndefined(value))\n\t return ctx.stylize('undefined', 'undefined');\n\t if (isString(value)) {\n\t var simple = '\\'' + JSON.stringify(value).replace(/^\"|\"$/g, '')\n\t .replace(/'/g, \"\\\\'\")\n\t .replace(/\\\\\"/g, '\"') + '\\'';\n\t return ctx.stylize(simple, 'string');\n\t }\n\t if (isNumber(value))\n\t return ctx.stylize('' + value, 'number');\n\t if (isBoolean(value))\n\t return ctx.stylize('' + value, 'boolean');\n\t // For some reason typeof null is \"object\", so special case here.\n\t if (isNull(value))\n\t return ctx.stylize('null', 'null');\n\t}\n\n\n\tfunction formatError(value) {\n\t return '[' + Error.prototype.toString.call(value) + ']';\n\t}\n\n\n\tfunction formatArray(ctx, value, recurseTimes, visibleKeys, keys) {\n\t var output = [];\n\t for (var i = 0, l = value.length; i < l; ++i) {\n\t if (hasOwnProperty(value, String(i))) {\n\t output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,\n\t String(i), true));\n\t } else {\n\t output.push('');\n\t }\n\t }\n\t keys.forEach(function(key) {\n\t if (!key.match(/^\\d+$/)) {\n\t output.push(formatProperty(ctx, value, recurseTimes, visibleKeys,\n\t key, true));\n\t }\n\t });\n\t return output;\n\t}\n\n\n\tfunction formatProperty(ctx, value, recurseTimes, visibleKeys, key, array) {\n\t var name, str, desc;\n\t desc = Object.getOwnPropertyDescriptor(value, key) || { value: value[key] };\n\t if (desc.get) {\n\t if (desc.set) {\n\t str = ctx.stylize('[Getter/Setter]', 'special');\n\t } else {\n\t str = ctx.stylize('[Getter]', 'special');\n\t }\n\t } else {\n\t if (desc.set) {\n\t str = ctx.stylize('[Setter]', 'special');\n\t }\n\t }\n\t if (!hasOwnProperty(visibleKeys, key)) {\n\t name = '[' + key + ']';\n\t }\n\t if (!str) {\n\t if (ctx.seen.indexOf(desc.value) < 0) {\n\t if (isNull(recurseTimes)) {\n\t str = formatValue(ctx, desc.value, null);\n\t } else {\n\t str = formatValue(ctx, desc.value, recurseTimes - 1);\n\t }\n\t if (str.indexOf('\\n') > -1) {\n\t if (array) {\n\t str = str.split('\\n').map(function(line) {\n\t return ' ' + line;\n\t }).join('\\n').substr(2);\n\t } else {\n\t str = '\\n' + str.split('\\n').map(function(line) {\n\t return ' ' + line;\n\t }).join('\\n');\n\t }\n\t }\n\t } else {\n\t str = ctx.stylize('[Circular]', 'special');\n\t }\n\t }\n\t if (isUndefined(name)) {\n\t if (array && key.match(/^\\d+$/)) {\n\t return str;\n\t }\n\t name = JSON.stringify('' + key);\n\t if (name.match(/^\"([a-zA-Z_][a-zA-Z_0-9]*)\"$/)) {\n\t name = name.substr(1, name.length - 2);\n\t name = ctx.stylize(name, 'name');\n\t } else {\n\t name = name.replace(/'/g, \"\\\\'\")\n\t .replace(/\\\\\"/g, '\"')\n\t .replace(/(^\"|\"$)/g, \"'\");\n\t name = ctx.stylize(name, 'string');\n\t }\n\t }\n\n\t return name + ': ' + str;\n\t}\n\n\n\tfunction reduceToSingleString(output, base, braces) {\n\t var numLinesEst = 0;\n\t var length = output.reduce(function(prev, cur) {\n\t numLinesEst++;\n\t if (cur.indexOf('\\n') >= 0) numLinesEst++;\n\t return prev + cur.replace(/\\u001b\\[\\d\\d?m/g, '').length + 1;\n\t }, 0);\n\n\t if (length > 60) {\n\t return braces[0] +\n\t (base === '' ? '' : base + '\\n ') +\n\t ' ' +\n\t output.join(',\\n ') +\n\t ' ' +\n\t braces[1];\n\t }\n\n\t return braces[0] + base + ' ' + output.join(', ') + ' ' + braces[1];\n\t}\n\n\n\t// NOTE: These type checking functions intentionally don't use `instanceof`\n\t// because it is fragile and can be easily faked with `Object.create()`.\n\tfunction isArray(ar) {\n\t return Array.isArray(ar);\n\t}\n\texports.isArray = isArray;\n\n\tfunction isBoolean(arg) {\n\t return typeof arg === 'boolean';\n\t}\n\texports.isBoolean = isBoolean;\n\n\tfunction isNull(arg) {\n\t return arg === null;\n\t}\n\texports.isNull = isNull;\n\n\tfunction isNullOrUndefined(arg) {\n\t return arg == null;\n\t}\n\texports.isNullOrUndefined = isNullOrUndefined;\n\n\tfunction isNumber(arg) {\n\t return typeof arg === 'number';\n\t}\n\texports.isNumber = isNumber;\n\n\tfunction isString(arg) {\n\t return typeof arg === 'string';\n\t}\n\texports.isString = isString;\n\n\tfunction isSymbol(arg) {\n\t return typeof arg === 'symbol';\n\t}\n\texports.isSymbol = isSymbol;\n\n\tfunction isUndefined(arg) {\n\t return arg === void 0;\n\t}\n\texports.isUndefined = isUndefined;\n\n\tfunction isRegExp(re) {\n\t return isObject(re) && objectToString(re) === '[object RegExp]';\n\t}\n\texports.isRegExp = isRegExp;\n\n\tfunction isObject(arg) {\n\t return typeof arg === 'object' && arg !== null;\n\t}\n\texports.isObject = isObject;\n\n\tfunction isDate(d) {\n\t return isObject(d) && objectToString(d) === '[object Date]';\n\t}\n\texports.isDate = isDate;\n\n\tfunction isError(e) {\n\t return isObject(e) &&\n\t (objectToString(e) === '[object Error]' || e instanceof Error);\n\t}\n\texports.isError = isError;\n\n\tfunction isFunction(arg) {\n\t return typeof arg === 'function';\n\t}\n\texports.isFunction = isFunction;\n\n\tfunction isPrimitive(arg) {\n\t return arg === null ||\n\t typeof arg === 'boolean' ||\n\t typeof arg === 'number' ||\n\t typeof arg === 'string' ||\n\t typeof arg === 'symbol' || // ES6 symbol\n\t typeof arg === 'undefined';\n\t}\n\texports.isPrimitive = isPrimitive;\n\n\texports.isBuffer = __webpack_require__(25);\n\n\tfunction objectToString(o) {\n\t return Object.prototype.toString.call(o);\n\t}\n\n\n\tfunction pad(n) {\n\t return n < 10 ? '0' + n.toString(10) : n.toString(10);\n\t}\n\n\n\tvar months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',\n\t 'Oct', 'Nov', 'Dec'];\n\n\t// 26 Feb 16:19:34\n\tfunction timestamp() {\n\t var d = new Date();\n\t var time = [pad(d.getHours()),\n\t pad(d.getMinutes()),\n\t pad(d.getSeconds())].join(':');\n\t return [d.getDate(), months[d.getMonth()], time].join(' ');\n\t}\n\n\n\t// log is just a thin wrapper to console.log that prepends a timestamp\n\texports.log = function() {\n\t console.log('%s - %s', timestamp(), exports.format.apply(exports, arguments));\n\t};\n\n\n\t/**\n\t * Inherit the prototype methods from one constructor into another.\n\t *\n\t * The Function.prototype.inherits from lang.js rewritten as a standalone\n\t * function (not on Function.prototype). NOTE: If this file is to be loaded\n\t * during bootstrapping this function needs to be rewritten using some native\n\t * functions as prototype setup using normal JavaScript does not work as\n\t * expected during bootstrapping (see mirror.js in r114903).\n\t *\n\t * @param {function} ctor Constructor function which needs to inherit the\n\t * prototype.\n\t * @param {function} superCtor Constructor function to inherit prototype from.\n\t */\n\texports.inherits = __webpack_require__(26);\n\n\texports._extend = function(origin, add) {\n\t // Don't do anything if add isn't an object\n\t if (!add || !isObject(add)) return origin;\n\n\t var keys = Object.keys(add);\n\t var i = keys.length;\n\t while (i--) {\n\t origin[keys[i]] = add[keys[i]];\n\t }\n\t return origin;\n\t};\n\n\tfunction hasOwnProperty(obj, prop) {\n\t return Object.prototype.hasOwnProperty.call(obj, prop);\n\t}\n\n\t/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }()), __webpack_require__(24)))\n\n/***/ }),\n/* 24 */\n/***/ (function(module, exports) {\n\n\t// shim for using process in browser\n\tvar process = module.exports = {};\n\n\t// cached from whatever global is present so that test runners that stub it\n\t// don't break things. But we need to wrap it in a try catch in case it is\n\t// wrapped in strict mode code which doesn't define any globals. It's inside a\n\t// function because try/catches deoptimize in certain engines.\n\n\tvar cachedSetTimeout;\n\tvar cachedClearTimeout;\n\n\tfunction defaultSetTimout() {\n\t throw new Error('setTimeout has not been defined');\n\t}\n\tfunction defaultClearTimeout () {\n\t throw new Error('clearTimeout has not been defined');\n\t}\n\t(function () {\n\t try {\n\t if (typeof setTimeout === 'function') {\n\t cachedSetTimeout = setTimeout;\n\t } else {\n\t cachedSetTimeout = defaultSetTimout;\n\t }\n\t } catch (e) {\n\t cachedSetTimeout = defaultSetTimout;\n\t }\n\t try {\n\t if (typeof clearTimeout === 'function') {\n\t cachedClearTimeout = clearTimeout;\n\t } else {\n\t cachedClearTimeout = defaultClearTimeout;\n\t }\n\t } catch (e) {\n\t cachedClearTimeout = defaultClearTimeout;\n\t }\n\t} ())\n\tfunction runTimeout(fun) {\n\t if (cachedSetTimeout === setTimeout) {\n\t //normal enviroments in sane situations\n\t return setTimeout(fun, 0);\n\t }\n\t // if setTimeout wasn't available but was latter defined\n\t if ((cachedSetTimeout === defaultSetTimout || !cachedSetTimeout) && setTimeout) {\n\t cachedSetTimeout = setTimeout;\n\t return setTimeout(fun, 0);\n\t }\n\t try {\n\t // when when somebody has screwed with setTimeout but no I.E. maddness\n\t return cachedSetTimeout(fun, 0);\n\t } catch(e){\n\t try {\n\t // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n\t return cachedSetTimeout.call(null, fun, 0);\n\t } catch(e){\n\t // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error\n\t return cachedSetTimeout.call(this, fun, 0);\n\t }\n\t }\n\n\n\t}\n\tfunction runClearTimeout(marker) {\n\t if (cachedClearTimeout === clearTimeout) {\n\t //normal enviroments in sane situations\n\t return clearTimeout(marker);\n\t }\n\t // if clearTimeout wasn't available but was latter defined\n\t if ((cachedClearTimeout === defaultClearTimeout || !cachedClearTimeout) && clearTimeout) {\n\t cachedClearTimeout = clearTimeout;\n\t return clearTimeout(marker);\n\t }\n\t try {\n\t // when when somebody has screwed with setTimeout but no I.E. maddness\n\t return cachedClearTimeout(marker);\n\t } catch (e){\n\t try {\n\t // When we are in I.E. but the script has been evaled so I.E. doesn't trust the global object when called normally\n\t return cachedClearTimeout.call(null, marker);\n\t } catch (e){\n\t // same as above but when it's a version of I.E. that must have the global object for 'this', hopfully our context correct otherwise it will throw a global error.\n\t // Some versions of I.E. have different rules for clearTimeout vs setTimeout\n\t return cachedClearTimeout.call(this, marker);\n\t }\n\t }\n\n\n\n\t}\n\tvar queue = [];\n\tvar draining = false;\n\tvar currentQueue;\n\tvar queueIndex = -1;\n\n\tfunction cleanUpNextTick() {\n\t if (!draining || !currentQueue) {\n\t return;\n\t }\n\t draining = false;\n\t if (currentQueue.length) {\n\t queue = currentQueue.concat(queue);\n\t } else {\n\t queueIndex = -1;\n\t }\n\t if (queue.length) {\n\t drainQueue();\n\t }\n\t}\n\n\tfunction drainQueue() {\n\t if (draining) {\n\t return;\n\t }\n\t var timeout = runTimeout(cleanUpNextTick);\n\t draining = true;\n\n\t var len = queue.length;\n\t while(len) {\n\t currentQueue = queue;\n\t queue = [];\n\t while (++queueIndex < len) {\n\t if (currentQueue) {\n\t currentQueue[queueIndex].run();\n\t }\n\t }\n\t queueIndex = -1;\n\t len = queue.length;\n\t }\n\t currentQueue = null;\n\t draining = false;\n\t runClearTimeout(timeout);\n\t}\n\n\tprocess.nextTick = function (fun) {\n\t var args = new Array(arguments.length - 1);\n\t if (arguments.length > 1) {\n\t for (var i = 1; i < arguments.length; i++) {\n\t args[i - 1] = arguments[i];\n\t }\n\t }\n\t queue.push(new Item(fun, args));\n\t if (queue.length === 1 && !draining) {\n\t runTimeout(drainQueue);\n\t }\n\t};\n\n\t// v8 likes predictible objects\n\tfunction Item(fun, array) {\n\t this.fun = fun;\n\t this.array = array;\n\t}\n\tItem.prototype.run = function () {\n\t this.fun.apply(null, this.array);\n\t};\n\tprocess.title = 'browser';\n\tprocess.browser = true;\n\tprocess.env = {};\n\tprocess.argv = [];\n\tprocess.version = ''; // empty string to avoid regexp issues\n\tprocess.versions = {};\n\n\tfunction noop() {}\n\n\tprocess.on = noop;\n\tprocess.addListener = noop;\n\tprocess.once = noop;\n\tprocess.off = noop;\n\tprocess.removeListener = noop;\n\tprocess.removeAllListeners = noop;\n\tprocess.emit = noop;\n\tprocess.prependListener = noop;\n\tprocess.prependOnceListener = noop;\n\n\tprocess.listeners = function (name) { return [] }\n\n\tprocess.binding = function (name) {\n\t throw new Error('process.binding is not supported');\n\t};\n\n\tprocess.cwd = function () { return '/' };\n\tprocess.chdir = function (dir) {\n\t throw new Error('process.chdir is not supported');\n\t};\n\tprocess.umask = function() { return 0; };\n\n\n/***/ }),\n/* 25 */\n/***/ (function(module, exports) {\n\n\tmodule.exports = function isBuffer(arg) {\n\t return arg && typeof arg === 'object'\n\t && typeof arg.copy === 'function'\n\t && typeof arg.fill === 'function'\n\t && typeof arg.readUInt8 === 'function';\n\t}\n\n/***/ }),\n/* 26 */\n/***/ (function(module, exports) {\n\n\tif (typeof Object.create === 'function') {\n\t // implementation from standard node.js 'util' module\n\t module.exports = function inherits(ctor, superCtor) {\n\t ctor.super_ = superCtor\n\t ctor.prototype = Object.create(superCtor.prototype, {\n\t constructor: {\n\t value: ctor,\n\t enumerable: false,\n\t writable: true,\n\t configurable: true\n\t }\n\t });\n\t };\n\t} else {\n\t // old school shim for old browsers\n\t module.exports = function inherits(ctor, superCtor) {\n\t ctor.super_ = superCtor\n\t var TempCtor = function () {}\n\t TempCtor.prototype = superCtor.prototype\n\t ctor.prototype = new TempCtor()\n\t ctor.prototype.constructor = ctor\n\t }\n\t}\n\n\n/***/ }),\n/* 27 */\n/***/ (function(module, exports, __webpack_require__) {\n\n\tvar DOM = __webpack_require__(9);\n\tvar utils = __webpack_require__(7);\n\n\tmodule.exports = (function() {\n\t var canvas = DOM.newEl('canvas');\n\t var ctx = null;\n\n\t return function(sceneGraph) {\n\t if (ctx == null) {\n\t ctx = canvas.getContext('2d');\n\t }\n\n\t var dpr = utils.canvasRatio();\n\t var root = sceneGraph.root;\n\t canvas.width = dpr * root.properties.width;\n\t canvas.height = dpr * root.properties.height ;\n\t ctx.textBaseline = 'middle';\n\n\t var bg = root.children.holderBg;\n\t var bgWidth = dpr * bg.width;\n\t var bgHeight = dpr * bg.height;\n\t //todo: parametrize outline width (e.g. in scene object)\n\t var outlineWidth = 2;\n\t var outlineOffsetWidth = outlineWidth / 2;\n\n\t ctx.fillStyle = bg.properties.fill;\n\t ctx.fillRect(0, 0, bgWidth, bgHeight);\n\n\t if (bg.properties.outline) {\n\t //todo: abstract this into a method\n\t ctx.strokeStyle = bg.properties.outline.fill;\n\t ctx.lineWidth = bg.properties.outline.width;\n\t ctx.moveTo(outlineOffsetWidth, outlineOffsetWidth);\n\t // TL, TR, BR, BL\n\t ctx.lineTo(bgWidth - outlineOffsetWidth, outlineOffsetWidth);\n\t ctx.lineTo(bgWidth - outlineOffsetWidth, bgHeight - outlineOffsetWidth);\n\t ctx.lineTo(outlineOffsetWidth, bgHeight - outlineOffsetWidth);\n\t ctx.lineTo(outlineOffsetWidth, outlineOffsetWidth);\n\t // Diagonals\n\t ctx.moveTo(0, outlineOffsetWidth);\n\t ctx.lineTo(bgWidth, bgHeight - outlineOffsetWidth);\n\t ctx.moveTo(0, bgHeight - outlineOffsetWidth);\n\t ctx.lineTo(bgWidth, outlineOffsetWidth);\n\t ctx.stroke();\n\t }\n\n\t var textGroup = root.children.holderTextGroup;\n\t ctx.font = textGroup.properties.font.weight + ' ' + (dpr * textGroup.properties.font.size) + textGroup.properties.font.units + ' ' + textGroup.properties.font.family + ', monospace';\n\t ctx.fillStyle = textGroup.properties.fill;\n\n\t for (var lineKey in textGroup.children) {\n\t var line = textGroup.children[lineKey];\n\t for (var wordKey in line.children) {\n\t var word = line.children[wordKey];\n\t var x = dpr * (textGroup.x + line.x + word.x);\n\t var y = dpr * (textGroup.y + line.y + word.y + (textGroup.properties.leading / 2));\n\n\t ctx.fillText(word.properties.text, x, y);\n\t }\n\t }\n\n\t return canvas.toDataURL('image/png');\n\t };\n\t})();\n\n/***/ })\n/******/ ])\n});\n;\n(function(ctx, isMeteorPackage) {\n if (isMeteorPackage) {\n Holder = ctx.Holder;\n }\n})(this, typeof Meteor !== 'undefined' && typeof Package !== 'undefined');\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/legacy/8.10.1/components/alerts/index.html b/legacy/8.10.1/components/alerts/index.html
new file mode 100644
index 0000000..fa3e134
--- /dev/null
+++ b/legacy/8.10.1/components/alerts/index.html
@@ -0,0 +1,194 @@
+
+
+
+ reactstrap - Alerts
+ Alerts This is a primary alert — check it out!
This is a secondary alert — check it out!
This is a success alert — check it out!
This is a danger alert — check it out!
This is a warning alert — check it out!
This is a info alert — check it out!
This is a light alert — check it out!
This is a dark alert — check it out!
import React from 'react';
+import { Alert } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Alert color="primary">
+ This is a primary alert — check it out!
+ </Alert>
+ <Alert color="secondary">
+ This is a secondary alert — check it out!
+ </Alert>
+ <Alert color="success">
+ This is a success alert — check it out!
+ </Alert>
+ <Alert color="danger">
+ This is a danger alert — check it out!
+ </Alert>
+ <Alert color="warning">
+ This is a warning alert — check it out!
+ </Alert>
+ <Alert color="info">
+ This is a info alert — check it out!
+ </Alert>
+ <Alert color="light">
+ This is a light alert — check it out!
+ </Alert>
+ <Alert color="dark">
+ This is a dark alert — check it out!
+ </Alert>
+ </div>
+ );
+};
+
+export default Example;
+Properties Alert.propTypes = {
+ className: PropTypes.string,
+ closeClassName: PropTypes.string,
+ color: PropTypes.string, // default: 'success'
+ isOpen: PropTypes.bool, // default: true
+ toggle: PropTypes.func,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ fade: PropTypes.bool, // default: true
+ // Controls the transition of the alert fading in and out
+ // See [Fade](/components/fade/) for more details
+ transition: PropTypes.shape(Fade.propTypes),
+}Link color This is a secondary alert with
an example link . Give it a click if you like.
import React from 'react';
+import { Alert } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Alert color="primary">
+ This is a primary alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="secondary">
+ This is a secondary alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="success">
+ This is a success alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="danger">
+ This is a danger alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="warning">
+ This is a warning alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="info">
+ This is a info alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="light">
+ This is a light alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ <Alert color="dark">
+ This is a dark alert with <a href="#" className="alert-link">an example link</a>. Give it a click if you like.
+ </Alert>
+ </div>
+ );
+};
+
+export default Example;
+Additional content Well done! Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
import React from 'react';
+import { Alert } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Alert color="success">
+ <h4 className="alert-heading">Well done!</h4>
+ <p>
+ Aww yeah, you successfully read this important alert message. This example text is going
+ to run a bit longer so that you can see how spacing within an alert works with this kind
+ of content.
+ </p>
+ <hr />
+ <p className="mb-0">
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+ </p>
+ </Alert>
+ </div>
+ );
+};
+
+export default Example;
+Dismissing ×
import React, { useState } from 'react';
+import { Alert } from 'reactstrap';
+
+const AlertExample = (props) => {
+ const [visible, setVisible] = useState(true);
+
+ const onDismiss = () => setVisible(false);
+
+ return (
+ <Alert color="info" isOpen={visible} toggle={onDismiss}>
+ I am an alert and I can be dismissed!
+ </Alert>
+ );
+}
+
+export default AlertExample;
+Uncontrolled [disable] Alerts For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledAlert does not require isOpen nor toggle props to work.
×
import React from 'react';
+import { UncontrolledAlert } from 'reactstrap';
+
+function AlertExample() {
+ return (
+ <UncontrolledAlert color="info">
+ I am an alert and I can be dismissed!
+ </UncontrolledAlert>
+ );
+}
+
+export default AlertExample;
+Alerts without fade Fade can be disabled using fade=false.
×
×
import React, { useState } from 'react';
+import { UncontrolledAlert } from 'reactstrap';
+import Alert from '../../../src/Alert';
+
+export const AlertFadelessExample = (props) => {
+ const [visible, setVisible] = useState(true);
+
+ const onDismiss = () => setVisible(false);
+
+ return (
+ <div>
+ <Alert color="primary" isOpen={visible} toggle={onDismiss} fade={false}>
+ I am a primary alert and I can be dismissed without animating!
+ </Alert>
+ </div>
+ );
+}
+
+export function UncontrolledAlertFadelessExample() {
+ return (
+ <div>
+ <UncontrolledAlert color="info" fade={false}>
+ I am an alert and I can be dismissed without animating!
+ </UncontrolledAlert>
+ </div>
+ );
+}
+reactstrap - Badges
+ Badges Scale to parent
Heading New Heading New Heading New Heading New Heading New Heading New import React from 'react';
+import { Badge } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <h1>Heading <Badge color="secondary">New</Badge></h1>
+ <h2>Heading <Badge color="secondary">New</Badge></h2>
+ <h3>Heading <Badge color="secondary">New</Badge></h3>
+ <h4>Heading <Badge color="secondary">New</Badge></h4>
+ <h5>Heading <Badge color="secondary">New</Badge></h5>
+ <h6>Heading <Badge color="secondary">New</Badge></h6>
+ </div>
+ );
+}
+
+export default Example;
+Badges can be used as part of links or buttons to provide a counter.
import React from 'react';
+import { Badge, Button } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Button color="primary" outline>
+ Notifications <Badge color="secondary">4</Badge>
+ </Button>
+ </div>
+ );
+}
+
+export default Example;
+Contextual variations Primary Secondary Success Danger Warning Info Light Dark
import React from 'react';
+import { Badge } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Badge color="primary">Primary</Badge>
+ <Badge color="secondary">Secondary</Badge>
+ <Badge color="success">Success</Badge>
+ <Badge color="danger">Danger</Badge>
+ <Badge color="warning">Warning</Badge>
+ <Badge color="info">Info</Badge>
+ <Badge color="light">Light</Badge>
+ <Badge color="dark">Dark</Badge>
+ </div>
+ );
+
+}
+
+export default Example;
+Pills Primary Secondary Success Danger Warning Info Light Dark
import React from 'react';
+import { Badge } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Badge color="primary" pill>Primary</Badge>
+ <Badge color="secondary" pill>Secondary</Badge>
+ <Badge color="success" pill>Success</Badge>
+ <Badge color="danger" pill>Danger</Badge>
+ <Badge color="warning" pill>Warning</Badge>
+ <Badge color="info" pill>Info</Badge>
+ <Badge color="light" pill>Light</Badge>
+ <Badge color="dark" pill>Dark</Badge>
+ </div>
+ );
+}
+
+export default Example;
+Links Adding the href prop (without specifying a tag prop) will default the badge to a link.
import React from 'react';
+import { Badge } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Badge href="#" color="primary">Primary</Badge>
+ <Badge href="#" color="secondary">Secondary</Badge>
+ <Badge href="#" color="success">Success</Badge>
+ <Badge href="#" color="danger">Danger</Badge>
+ <Badge href="#" color="warning">Warning</Badge>
+ <Badge href="#" color="info">Info</Badge>
+ <Badge href="#" color="light">Light</Badge>
+ <Badge href="#" color="dark">Dark</Badge>
+ </div>
+ );
+}
+
+export default Example;
+reactstrap - Breadcrumbs
+ Breadcrumbs import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Breadcrumb>
+ <BreadcrumbItem active>Home</BreadcrumbItem>
+ </Breadcrumb>
+ <Breadcrumb>
+ <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+ <BreadcrumbItem active>Library</BreadcrumbItem>
+ </Breadcrumb>
+ <Breadcrumb>
+ <BreadcrumbItem><a href="#">Home</a></BreadcrumbItem>
+ <BreadcrumbItem><a href="#">Library</a></BreadcrumbItem>
+ <BreadcrumbItem active>Data</BreadcrumbItem>
+ </Breadcrumb>
+ </div>
+ );
+};
+
+export default Example;
+Properties Breadcrumb.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ listClassName: PropTypes.string,
+ cssModule: PropTypes.object,
+ children: PropTypes.node,
+ 'aria-label': PropTypes.string
+};
+
+BreadcrumbItem.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ active: PropTypes.bool,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+};
+No list Breadcrumbs can work without the usage of list markup.
import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Breadcrumb tag="nav" listTag="div">
+ <BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
+ <BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
+ <BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
+ <BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
+ </Breadcrumb>
+ </div>
+ );
+};
+
+export default Example;
+reactstrap - Button Dropdown
+ Button Dropdown import React, { useState } from 'react';
+import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setOpen] = useState(false);
+
+ const toggle = () => setOpen(!dropdownOpen);
+
+ return (
+ <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle caret>
+ Button Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </ButtonDropdown>
+ );
+}
+
+export default Example;
+Properties ButtonDropdown.propTypes = {
+ disabled: PropTypes.bool,
+ direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+ group: PropTypes.bool,
+ isOpen: PropTypes.bool,
+ tag: PropTypes.string,
+ toggle: PropTypes.func
+};
+
+DropdownToggle.propTypes = {
+ caret: PropTypes.bool,
+ color: PropTypes.string,
+ disabled: PropTypes.bool,
+ onClick: PropTypes.func,
+ 'data-toggle': PropTypes.string,
+ 'aria-haspopup': PropTypes.bool
+};Primary
Secondary
Success
Info
Warning
Danger
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle caret color="primary">
+ Text
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider/>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>Primary Toggle Dropdown
Secondary Toggle Dropdown
Success Toggle Dropdown
Info Toggle Dropdown
Warning Toggle Dropdown
Danger Toggle Dropdown
<ButtonDropdown isOpen={isOpen} toggle={toggle}>
+ <Button id="caret" color="primary">{this.props.text}</Button>
+ <DropdownToggle split color="primary" />
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider/>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>Sizing <ButtonDropdown isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle caret size="lg">
+ Large Button
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>
+
+<ButtonDropdown isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle caret size="sm">
+ Small Button
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>Uncontrolled Dropdown import React from 'react';
+import { UncontrolledButtonDropdown, DropdownMenu, DropdownItem, DropdownToggle } from 'reactstrap';
+
+export default function Example () => {
+ return (
+ <UncontrolledButtonDropdown>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </UncontrolledButtonDropdown>
+ );
+}Drop direction variations Dropup
Dropleft
Dropright
<ButtonDropdown direction="up" isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle caret>
+ Dropup
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>
+
+<ButtonDropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
+ <DropdownToggle caret>
+ Dropleft
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>
+
+<ButtonDropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
+ <DropdownToggle caret>
+ Dropright
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</ButtonDropdown>reactstrap - Button Group
+ Button Group import React from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ButtonGroup>
+ <Button>Left</Button>
+ <Button>Middle</Button>
+ <Button>Right</Button>
+ </ButtonGroup>
+ );
+}
+
+export default Example;
+Properties ButtonGroup.propTypes = {
+ ariaLabel: PropTypes.string,
+ className: PropTypes.string,
+ role: PropTypes.string,
+ size: PropTypes.string,
+ vertical: PropTypes.bool
+};import React from 'react';
+import { Button, ButtonGroup, ButtonToolbar } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ButtonToolbar>
+ <ButtonGroup>
+ <Button>1</Button>
+ <Button>2</Button>
+ <Button>3</Button>
+ <Button>4</Button>
+ </ButtonGroup>
+ <ButtonGroup>
+ <Button>5</Button>
+ <Button>6</Button>
+ <Button>7</Button>
+ </ButtonGroup>
+ <ButtonGroup>
+ <Button>8</Button>
+ </ButtonGroup>
+ </ButtonToolbar>
+ );
+}
+
+export default Example;
+Sizing Left Middle Right
Left Middle Right
Left Middle Right
<ButtonGroup size="lg">
+ <Button>Left</Button>
+ <Button>Middle</Button>
+ <Button>Right</Button>
+</ButtonGroup>
+
+<ButtonGroup>
+ <Button>Left</Button>
+ <Button>Middle</Button>
+ <Button>Right</Button>
+</ButtonGroup>
+
+<ButtonGroup size="sm">
+ <Button>Left</Button>
+ <Button>Middle</Button>
+ <Button>Right</Button>
+</ButtonGroup>Nesting <ButtonGroup>
+ <Button>1</Button>
+ <Button>2</Button>
+ <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Dropdown Link</DropdownItem>
+ <DropdownItem>Dropdown Link</DropdownItem>
+ </DropdownMenu>
+ </ButtonDropdown>
+</ButtonGroup>Vertical variation <ButtonGroup vertical>
+ <Button>1</Button>
+ <Button>2</Button>
+ <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Dropdown Link</DropdownItem>
+ <DropdownItem>Dropdown Link</DropdownItem>
+ </DropdownMenu>
+ </ButtonDropdown>
+</ButtonGroup>reactstrap - 404 Page Not Found
+ reactstrap - Buttons
+ Buttons primary secondary success info warning danger link
import React from 'react';
+import { Button } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Button color="primary">primary</Button>{' '}
+ <Button color="secondary">secondary</Button>{' '}
+ <Button color="success">success</Button>{' '}
+ <Button color="info">info</Button>{' '}
+ <Button color="warning">warning</Button>{' '}
+ <Button color="danger">danger</Button>{' '}
+ <Button color="link">link</Button>
+ </div>
+ );
+}
+
+export default Example;
+Properties Button.propTypes = {
+ active: PropTypes.bool,
+ 'aria-label': PropTypes.string,
+ block: PropTypes.bool,
+ color: PropTypes.string, // default: 'secondary'
+ disabled: PropTypes.bool,
+ outline: PropTypes.bool,
+
+ // Pass in a Component to override default button element
+ // example: react-router Link
+ // default: 'button'
+ tag: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.string,
+ PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+ PropTypes.arrayOf(PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.string,
+ PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+ ]))
+ ]),
+
+ // ref will only get you a reference to the Button component, use innerRef to get a reference to the DOM element (for things like focus management).
+ innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+
+ onClick: PropTypes.func,
+ size: PropTypes.string,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+
+ // use close prop for BS4 close icon utility
+ close: PropTypes.bool,
+}
+
+Button.defaultProps = {
+ color: 'secondary',
+ tag: 'button',
+}primary secondary success info warning danger
import React from 'react';
+import { Button } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Button outline color="primary">primary</Button>{' '}
+ <Button outline color="secondary">secondary</Button>{' '}
+ <Button outline color="success">success</Button>{' '}
+ <Button outline color="info">info</Button>{' '}
+ <Button outline color="warning">warning</Button>{' '}
+ <Button outline color="danger">danger</Button>
+ </div>
+ );
+
+}
+
+export default Example;
+Sizes Large Button Large Button
<Button color="primary" size="lg">Large Button</Button>{' '}
+<Button color="secondary" size="lg">Large Button</Button>Small Button Small Button
<Button color="primary" size="sm">Small Button</Button>{' '}
+<Button color="secondary" size="sm">Small Button</Button>Block level button Block level button
<Button color="primary" size="lg" block>Block level button</Button>
+<Button color="secondary" size="lg" block>Block level button</Button>Active State Primary link Link
<Button color="primary" size="lg" active>Primary link</Button>{' '}
+<Button color="secondary" size="lg" active>Link</Button>Disabled State Primary button Button
<Button color="primary" size="lg" disabled>Primary button</Button>{' '}
+<Button color="secondary" size="lg" disabled>Button</Button>In order to have checkbox and radio buttons, your component needs to manage the state of which button(s) are active/select. It is not in the opinion of this library to manage state within it's components so it is left up to you. Below is a simple example showcasing how this could be done using the components which already exist in this library.
Radio Buttons One Two Three
Selected:
Checkbox Buttons One Two Three
Selected: []
import React, { useState } from 'react';
+import { Button, ButtonGroup } from 'reactstrap';
+
+const 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 (
+ <div>
+ <h5>Radio Buttons</h5>
+ <ButtonGroup>
+ <Button color="primary" onClick={() => setRSelected(1)} active={rSelected === 1}>One</Button>
+ <Button color="primary" onClick={() => setRSelected(2)} active={rSelected === 2}>Two</Button>
+ <Button color="primary" onClick={() => setRSelected(3)} active={rSelected === 3}>Three</Button>
+ </ButtonGroup>
+ <p>Selected: {rSelected}</p>
+
+ <h5>Checkbox Buttons</h5>
+ <ButtonGroup>
+ <Button color="primary" onClick={() => onCheckboxBtnClick(1)} active={cSelected.includes(1)}>One</Button>
+ <Button color="primary" onClick={() => onCheckboxBtnClick(2)} active={cSelected.includes(2)}>Two</Button>
+ <Button color="primary" onClick={() => onCheckboxBtnClick(3)} active={cSelected.includes(3)}>Three</Button>
+ </ButtonGroup>
+ <p>Selected: {JSON.stringify(cSelected)}</p>
+ </div>
+ );
+}
+
+export default Example;Close icon Use a generic close icon to dismiss content. Use <Button close /> for the default icon. Otherwise, custom content for the button may be defined. (e.g. JSX: <Button close><span aria-hidden="true">–</span></Button>) The default aria-label is "Close".
–
Custom content and aria-label
import React, { Component } from 'react';
+import { Button, Card, CardBody, CardText, CardGroup, CardTitle } from 'reactstrap';
+
+const Example = () => (
+ <div>
+ <CardGroup>
+ <Card>
+ <CardBody>
+ <CardTitle>
+
+ <Button close />
+
+ </CardTitle>
+ <CardText>Default close icon</CardText>
+ </CardBody>
+ </Card>
+
+ <Card>
+ <CardBody>
+ <CardTitle>
+
+ <Button close aria-label="Cancel">
+ <span aria-hidden>–</span>
+ </Button>
+
+ </CardTitle>
+ <CardText>
+ Custom content and aria-label
+ </CardText>
+ </CardBody>
+ </Card>
+ </CardGroup>
+
+
+ </div>
+);
+
+export default Example;
+Button toggle state
primary secondary success info warning danger
import React from "react";
+import { ButtonToggle } from "reactstrap";
+
+class Example extends React.Component {
+ render() {
+ return (
+ <div>
+ <ButtonToggle color="primary">primary</ButtonToggle>{' '}
+ <ButtonToggle color="secondary">secondary</ButtonToggle>{' '}
+ <ButtonToggle color="success">success</ButtonToggle>{' '}
+ <ButtonToggle color="info">info</ButtonToggle>{' '}
+ <ButtonToggle color="warning">warning</ButtonToggle>{' '}
+ <ButtonToggle color="danger">danger</ButtonToggle>{' '}
+ </div>
+ );
+ }
+}
+
+export default Example;reactstrap - Card
+ Card 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 import React from 'react';
+import {
+ Card, CardImg, CardText, CardBody,
+ CardTitle, CardSubtitle, Button
+} from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card>
+ <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Properties Card.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ inverse: PropTypes.bool,
+ color: PropTypes.string,
+ body: PropTypes.bool,
+ className: PropTypes.string
+};
+
+CardBody.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardColumns.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardDeck.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardFooter.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardGroup.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardHeader.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardImg.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ // Use top or bottom to position image via "card-img-top" or "card-img-bottom"
+ top: PropTypes.bool,
+ bottom: PropTypes.bool
+};
+
+CardImgOverlay.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardLink.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ // ref will only get you a reference to the CardLink component, use innerRef to get a reference to the DOM element (for things like focus management).
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+};
+
+CardSubtitle.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardText.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};
+
+CardTitle.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.string
+};Content Types
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 import React from 'react';
+import {
+ Card, CardText, CardBody, CardLink,
+ CardTitle, CardSubtitle
+} from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card>
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ </CardBody>
+ <img width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardText>Some quick example text to build on the card title and make up the bulk of the card's content.</CardText>
+ <CardLink href="#">Card Link</CardLink>
+ <CardLink href="#">Another Link</CardLink>
+ </CardBody>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Sizing 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 import React from 'react';
+import { Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Row>
+ <Col sm="6">
+ <Card body>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ </Col>
+ <Col sm="6">
+ <Card body>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ </Col>
+ </Row>
+ );
+};
+
+export default Example;
+Text alignment 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 import React from 'react';
+import { Card, Button, CardTitle, CardText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card body>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ <Card body className="text-center">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ <Card body className="text-right">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+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 import React from 'react';
+import { Card, Button, CardHeader, CardFooter, CardBody,
+ CardTitle, CardText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card>
+ <CardHeader>Header</CardHeader>
+ <CardBody>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </CardBody>
+ <CardFooter>Footer</CardFooter>
+ </Card>
+
+ <Card>
+ <CardHeader tag="h3">Featured</CardHeader>
+ <CardBody>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </CardBody>
+ <CardFooter className="text-muted">Footer</CardFooter>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Image caps 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
import React from 'react';
+import { Card, CardBody, Button, CardTitle, CardText, CardImg } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card>
+ <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card Title</CardTitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <CardText>
+ <small className="text-muted">Last updated 3 mins ago</small>
+ </CardText>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardBody>
+ <CardTitle tag="h5">Card Title</CardTitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <CardText>
+ <small className="text-muted">Last updated 3 mins ago</small>
+ </CardText>
+ </CardBody>
+ <CardImg bottom width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Image overlays 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
import React from 'react';
+import { Card, CardTitle, CardText, CardImg, CardImgOverlay } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card inverse>
+ <CardImg width="100%" src="/assets/318x270.svg" alt="Card image cap" />
+ <CardImgOverlay>
+ <CardTitle tag="h5">Card Title</CardTitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <CardText>
+ <small className="text-muted">Last updated 3 mins ago</small>
+ </CardText>
+ </CardImgOverlay>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Background variants Special Title Treatment With 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 Special Title Treatment With 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 Special Title Treatment With 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 import React from 'react';
+import { Card, Button, CardTitle, CardText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </Card>
+ <Card body inverse color="primary">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body inverse color="success">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body inverse color="info">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body inverse color="warning">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body inverse color="danger">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Outline variants Special Title Treatment With 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 Special Title Treatment With 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 Special Title Treatment With 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 import React from 'react';
+import { Card, Button, CardTitle, CardText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Card body outline color="secondary">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </Card>
+ <Card body outline color="primary">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body outline color="success">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body outline color="info">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body outline color="warning">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ <Card body outline color="danger">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ </div>
+ );
+};
+
+export default Example;
+Groups 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 import React from 'react';
+import {
+ Card, Button, CardImg, CardTitle, CardText, CardGroup,
+ CardSubtitle, CardBody
+} from 'reactstrap';
+const Example = (props) => {
+ return (
+ <CardGroup>
+ <Card>
+ <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/318x180.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>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.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ </CardGroup>
+ );
+};
+
+export default Example;
+Decks 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 import React from 'react';
+import {
+ Card, Button, CardImg, CardTitle, CardText, CardDeck,
+ CardSubtitle, CardBody
+} from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <CardDeck>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>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.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ </CardDeck>
+ );
+};
+
+export default Example;
+Columns 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 import React from 'react';
+import {
+ Card, Button, CardImg, CardTitle, CardText, CardColumns,
+ CardSubtitle, CardBody
+} from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <CardColumns>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ </Card>
+ <Card>
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card body inverse style={{ backgroundColor: '#333', borderColor: '#333' }}>
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Button</Button>
+ </Card>
+ <Card>
+ <CardImg top width="100%" src="/assets/256x186.svg" alt="Card image cap" />
+ <CardBody>
+ <CardTitle tag="h5">Card title</CardTitle>
+ <CardSubtitle tag="h6" className="mb-2 text-muted">Card subtitle</CardSubtitle>
+ <CardText>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.</CardText>
+ <Button>Button</Button>
+ </CardBody>
+ </Card>
+ <Card body inverse color="primary">
+ <CardTitle tag="h5">Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button color="secondary">Button</Button>
+ </Card>
+ </CardColumns>
+ );
+};
+
+export default Example;
+reactstrap - Carousel
+ Carousel import React, { useState } from 'react';
+import {
+ Carousel,
+ CarouselItem,
+ CarouselControl,
+ CarouselIndicators,
+ CarouselCaption
+} from 'reactstrap';
+
+const items = [
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 1',
+ caption: 'Slide 1'
+ },
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 2',
+ caption: 'Slide 2'
+ },
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 3',
+ caption: 'Slide 3'
+ }
+];
+
+const 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 (
+ <CarouselItem
+ onExiting={() => setAnimating(true)}
+ onExited={() => setAnimating(false)}
+ key={item.src}
+ >
+ <img src={item.src} alt={item.altText} />
+ <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
+ </CarouselItem>
+ );
+ });
+
+ return (
+ <Carousel
+ activeIndex={activeIndex}
+ next={next}
+ previous={previous}
+ >
+ <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
+ {slides}
+ <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
+ <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
+ </Carousel>
+ );
+}
+
+export default Example;
+Carousel Properties Carousel.propTypes = {
+ // the current active slide of the carousel
+ activeIndex: PropTypes.number,
+ // a function which should advance the carousel to the next slide (via activeIndex)
+ next: PropTypes.func.isRequired,
+ // a function which should advance the carousel to the previous slide (via activeIndex)
+ previous: PropTypes.func.isRequired,
+ // controls if the left and right arrow keys should control the carousel
+ keyboard: PropTypes.bool,
+ /* If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on
+ * mouseleave. If set to false, hovering over the carousel won't pause it. (default: "hover")
+ */
+ pause: PropTypes.oneOf(['hover', false]),
+ // Autoplays the carousel after the user manually cycles the first item. If "carousel", autoplays the carousel on load.
+ // This is how bootstrap defines it... I would prefer a bool named autoplay or something...
+ ride: PropTypes.oneOf(['carousel']),
+ // the interval at which the carousel automatically cycles (default: 5000)
+ // If set to false, carousel will not Autoplay (i.e. will not automatically cycle).
+ interval: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ PropTypes.bool,
+ ]),
+ children: PropTypes.array,
+ // called when the mouse enters the Carousel
+ mouseEnter: PropTypes.func,
+ // called when the mouse exits the Carousel
+ mouseLeave: PropTypes.func,
+ // controls whether the slide animation on the Carousel works or not
+ slide: PropTypes.bool,
+ cssModule: PropTypes.object,
+ // controls whether the touch gestures on the Carousel works or not (default: true)
+ enableTouch: PropTypes.bool,
+};CarouselItem Properties CarouselItem.propTypes = {
+ ...Transition.propTypes,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ in: PropTypes.bool,
+ cssModule: PropTypes.object,
+ children: PropTypes.node,
+ slide: PropTypes.bool,
+};CarouselControl Properties CarouselControl.propTypes = {
+ direction: PropTypes.oneOf(['prev', 'next']).isRequired,
+ onClickHandler: PropTypes.func.isRequired,
+ cssModule: PropTypes.object,
+ directionText: PropTypes.string
+};CarouselIndicators Properties CarouselIndicators.propTypes = {
+ items: PropTypes.array.isRequired,
+ activeIndex: PropTypes.number.isRequired,
+ cssModule: PropTypes.object,
+ onClickHandler: PropTypes.func.isRequired
+};CarouselCaption Properties CarouselCaption.propTypes = {
+ captionHeader: PropTypes.node,
+ captionText: PropTypes.node.isRequired,
+ cssModule: PropTypes.object
+};Uncontrolled Carousel For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledCarousel does not require previous, next nor activeIndex props to work. Anything provided to a normal Carousel can also be provided to UncontrolledCarousel, overriding the control UncontrolledCarousel provides. Additionally, you can hide the controls by passing false to the controls prop and you can disable the indicators by passing false to the indicators prop; both are visible by default. Autoplay (ride="carousel") is enabled by default, you can disable it by passing false to the autoPlay prop.
import React from 'react';
+import { UncontrolledCarousel } from 'reactstrap';
+
+const items = [
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 1',
+ caption: 'Slide 1',
+ header: 'Slide 1 Header',
+ key: '1'
+ },
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 2',
+ caption: 'Slide 2',
+ header: 'Slide 2 Header',
+ key: '2'
+ },
+ {
+ src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
+ altText: 'Slide 3',
+ caption: 'Slide 3',
+ header: 'Slide 3 Header',
+ key: '3'
+ }
+];
+
+const Example = () => <UncontrolledCarousel items={items} />;
+
+export default Example;
+Uncontrolled Carousel Properties Same as Carousel (except children) can be overridden plus the following
UncontrolledCarousel.propTypes = {
+ items: PropTypes.array.isRequired,
+ indicators: PropTypes.bool, // default: true
+ controls: PropTypes.bool, // default: true
+ autoPlay: PropTypes.bool, // default: true
+};Carousel using a tag and classname 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'
+ }
+];
+
+const 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 (
+ <CarouselItem
+ className="custom-tag"
+ tag="div"
+ key={item.id}
+ onExiting={() => setAnimating(true)}
+ onExited={() => setAnimating(false)}
+ >
+ <CarouselCaption className="text-danger" captionText={item.caption} captionHeader={item.caption} />
+ </CarouselItem>
+ );
+ });
+
+ return (
+ <div>
+ <style>
+ {
+ `.custom-tag {
+ max-width: 100%;
+ height: 500px;
+ background: black;
+ }`
+ }
+ </style>
+ <Carousel
+ activeIndex={activeIndex}
+ next={next}
+ previous={previous}
+ >
+ <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} />
+ {slides}
+ <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} />
+ <CarouselControl direction="next" directionText="Next" onClickHandler={next} />
+ </Carousel>
+ </div>
+ );
+}
+
+export default Example;
+reactstrap - Collapse
+ Collapse 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.
import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card } from 'reactstrap';
+
+const Example = (props) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+ <div>
+ <Button color="primary" onClick={toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+ <Collapse isOpen={isOpen}>
+ <Card>
+ <CardBody>
+ 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.
+ </CardBody>
+ </Card>
+ </Collapse>
+ </div>
+ );
+}
+
+export default Example;
+Properties Collapse.propTypes = {
+ ...Transition.propTypes, // see note below
+ isOpen: PropTypes.bool,
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node
+ ]),
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ className: PropTypes.node,
+ navbar: PropTypes.bool,
+ cssModule: PropTypes.object,
+ innerRef: PropTypes.object,
+};Collapse is wrapped in a Transition component from react-transition-group/transition. Transition props are passed through to this wrapper. Refer to the Transition documentation for details: http://reactcommunity.org/react-transition-group/transition/ .
Events Use the onEnter, onEntering, onEntered, onExiting and onExited props for callbacks when the Collapse has finished opening (entering) or closing (exiting).
Toggle Current state: Closed 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.
import React, { useState } from 'react';
+import { Collapse, Button, CardBody, Card } from 'reactstrap';
+
+const Example = (props) => {
+ const [collapse, setCollapse] = useState(false);
+ const [status, setStatus] = useState('Closed');
+
+ const onEntering = () => setStatus('Opening...');
+
+ const onEntered = () => setStatus('Opened');
+
+ const onExiting = () => setStatus('Closing...');
+
+ const onExited = () => setStatus('Closed');
+
+ const toggle = () => setCollapse(!collapse);
+
+ return (
+ <div>
+ <Button color="primary" onClick={toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
+ <h5>Current state: {status}</h5>
+ <Collapse
+ isOpen={collapse}
+ onEntering={onEntering}
+ onEntered={onEntered}
+ onExiting={onExiting}
+ onExited={onExited}
+ >
+ <Card>
+ <CardBody>
+ 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.
+ </CardBody>
+ </Card>
+ </Collapse>
+ </div>
+ );
+}
+
+export default Example;
+Uncontrolled Collapse For the most basic use-case, an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledCollapse does not require an isOpen prop. Instead pass a toggler prop. The toggler prop is a string which will run querySelectorAll to find dom elements which will trigger toggle. The defaultOpenprop controls the initial state.
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.
import React from 'react';
+import { UncontrolledCollapse, Button, CardBody, Card } from 'reactstrap';
+
+const Example = () => (
+ <div>
+ <Button color="primary" id="toggler" style={{ marginBottom: '1rem' }}>
+ Toggle
+ </Button>
+ <UncontrolledCollapse toggler="#toggler">
+ <Card>
+ <CardBody>
+ 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.
+ </CardBody>
+ </Card>
+ </UncontrolledCollapse>
+ </div>
+);
+
+export default Example;
+reactstrap - Dropdowns
+ Dropdowns The Dropdown component is used to pass the isOpen & toggle props via context to the following components: DropdownToggle, DropdownMenu. The DropdownToggle uses the Button component internally, meaning it also accepts all the props the Button component accepts.
import React, { useState } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(prevState => !prevState);
+
+ return (
+ <Dropdown isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem>Some Action</DropdownItem>
+ <DropdownItem text>Dropdown Item Text</DropdownItem>
+ <DropdownItem disabled>Action (disabled)</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Foo Action</DropdownItem>
+ <DropdownItem>Bar Action</DropdownItem>
+ <DropdownItem>Quo Action</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ );
+}
+
+export default Example;Properties Dropdown.propTypes = {
+ a11y: PropTypes.bool, // defaults to true. Set to false to enable more bootstrap like tabbing behavior
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+ group: PropTypes.bool,
+ isOpen: PropTypes.bool,
+ // For Dropdown usage inside a Nav
+ nav: PropTypes.bool,
+ active: PropTypes.bool,
+ // For Dropdown usage inside a Navbar (disables popper)
+ inNavbar: PropTypes.bool,
+ tag: PropTypes.string, // default: 'div' unless nav=true, then 'li'
+ toggle: PropTypes.func,
+ setActiveFromChild: PropTypes.bool
+};
+
+DropdownToggle.propTypes = {
+ caret: PropTypes.bool,
+ color: PropTypes.string,
+ className: PropTypes.string,
+ disabled: PropTypes.bool,
+ onClick: PropTypes.func,
+ 'data-toggle': PropTypes.string,
+ 'aria-haspopup': PropTypes.bool,
+ // For DropdownToggle usage inside a Nav
+ nav: PropTypes.bool,
+ // Defaults to Button component
+ tag: PropTypes.any
+};
+
+DropdownMenu.propTypes = {
+ tag: PropTypes.string,
+ children: PropTypes.node.isRequired,
+ right: PropTypes.bool,
+ flip: PropTypes.bool, // default: true,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ // Custom modifiers that are passed to DropdownMenu.js, see https://popper.js.org/popper-documentation.html#modifiers
+ modifiers: PropTypes.object,
+ persist: PropTypes.bool, // presist the popper, even when closed. See #779 for reasoning
+ // passed to popper, see https://popper.js.org/popper-documentation.html#Popper.Defaults.positionFixed
+ positionFixed: PropTypes.bool,
+ // Element to place the menu in. Used to show the menu as a child of 'body'
+ // or other elements in the DOM instead of where it naturally is. This can be
+ // used to make the Dropdown escape a container with overflow: hidden
+ container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
+};
+
+DropdownItem.propTypes = {
+ children: PropTypes.node,
+ active: PropTypes.bool,
+ disabled: PropTypes.bool,
+ divider: PropTypes.bool,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ header: PropTypes.bool,
+ onClick: PropTypes.func,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ toggle: PropTypes.bool, // default: true
+ text: PropTypes.bool
+};Alignment To align the DropdownMenu to the right, add a right prop to Dropdown.
Dropdown's menu is right-aligned
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown's menu is right-aligned
+ </DropdownToggle>
+ <DropdownMenu right>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider/>
+ <DropdownItem>Another Really Really Long Action (Really!)</DropdownItem>
+ </DropdownMenu>
+</Dropdown><DropdownItem header>Header</DropdownItem><DropdownItem divider/><DropdownItem>Action</DropdownItem><DropdownItem disabled>Action</DropdownItem><DropdownItem text>Dropdown item text</DropdownItem>Sizing <Dropdown group isOpen={this.state.dropdownOpen} size="lg" toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ ...
+ </DropdownMenu>
+</Dropdown>
+
+<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ ...
+ </DropdownMenu>
+</Dropdown>
+
+<Dropdown group isOpen={this.state.dropdownOpen} size="sm" toggle={this.toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ ...
+ </DropdownMenu>
+</Dropdown>Custom Dropdown import React, { useState } from 'react';
+import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap';
+
+const Example = () => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(prevState => !prevState);
+
+ return (
+ <Dropdown isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle
+ tag="span"
+ data-toggle="dropdown"
+ aria-expanded={dropdownOpen}
+ >
+ Custom Dropdown Content
+ </DropdownToggle>
+ <DropdownMenu>
+ <div onClick={toggle}>Custom dropdown item</div>
+ <div onClick={toggle}>Custom dropdown item</div>
+ <div onClick={toggle}>Custom dropdown item</div>
+ <div onClick={toggle}>Custom dropdown item</div>
+ </DropdownMenu>
+ </Dropdown>
+ );
+}
+
+export default Example;
+Uncontrolled Dropdown For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledDropdown does not require isOpen nor toggle props to work. For the ButtonDropdown flavor, an uncontrolled component have been made as well; UncontrolledButtonDropdown.
import React from 'react';
+import { UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+export default function Example () {
+ return (
+ <UncontrolledDropdown>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </UncontrolledDropdown>
+ );
+}
+Drop direction variations <Dropdown direction="up" isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle caret>
+ Dropup
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</Dropdown>
+
+<Dropdown direction="left" isOpen={this.state.btnDropleft} toggle={() => { this.setState({ btnDropleft: !this.state.btnDropleft }); }}>
+ <DropdownToggle caret>
+ Dropleft
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</Dropdown>
+
+<Dropdown direction="right" isOpen={this.state.btnDropright} toggle={() => { this.setState({ btnDropright: !this.state.btnDropright }); }}>
+ <DropdownToggle caret>
+ Dropright
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</Dropdown>Modifiers <Dropdown isOpen={isOpen} toggle={toggle}>
+ <DropdownToggle>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu
+ modifiers={{
+ setMaxHeight: {
+ enabled: true,
+ order: 890,
+ fn: (data) => {
+ return {
+ ...data,
+ styles: {
+ ...data.styles,
+ overflow: 'auto',
+ maxHeight: '100px',
+ },
+ };
+ },
+ },
+ }}
+ >
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+</Dropdown>setActiveFromChild Use setActiveFromChild prop to automatically set the dropdown to active when any of the dropdown menu items are active. Note: this prop will not work in conjunction with react-router Link and activeClassName.
import React from 'react';
+import { Navbar, Nav, NavItem, NavLink, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+export default function Example () {
+ return (
+ <Navbar color="light" light expand="md">
+ <Nav className="ml-auto" navbar>
+ <NavItem>
+ <NavLink href="/components/">Inactive Link</NavLink>
+ </NavItem>
+ <UncontrolledDropdown setActiveFromChild>
+ <DropdownToggle tag="a" className="nav-link" caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem tag="a" href="/blah" active>Link</DropdownItem>
+ </DropdownMenu>
+ </UncontrolledDropdown>
+ </Nav>
+ </Navbar>
+ );
+}
+container Use the container prop to allow the dropdown menu to be placed inside an alternate container through a React Portal. This can be used to allow the dropdown menu to escape a container with the style overflow: hidden.
Container with overflow: hidden.
Last clicked: null
Dropdown
import React, { useState } from 'react';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(prevState => !prevState);
+ const [lastClicked, setLastClicked] = useState(null);
+
+ return (
+ <div style={{ width: 300, height: 100, border: '1px solid #000', padding: '8px', overflow: 'hidden' }}>
+ Container with overflow: hidden.<br />
+ Last clicked: {lastClicked || 'null'}
+ <Dropdown isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu container="body">
+ <DropdownItem onClick={() => setLastClicked(1)}>Action 1</DropdownItem>
+ <DropdownItem onClick={() => setLastClicked(2)}>Action 2</DropdownItem>
+ <DropdownItem onClick={() => setLastClicked(3)}>Action 3</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ </div>
+ );
+}
+
+export default Example;
+reactstrap - Form
+ Form import React from 'react';
+import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup>
+ <Label for="exampleEmail">Email</Label>
+ <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="examplePassword">Password</Label>
+ <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleSelect">Select</Label>
+ <Input type="select" name="select" id="exampleSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleSelectMulti">Select Multiple</Label>
+ <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleText">Text Area</Label>
+ <Input type="textarea" name="text" id="exampleText" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleFile">File</Label>
+ <Input type="file" name="file" id="exampleFile" />
+ <FormText color="muted">
+ This is some placeholder block-level help text for the above input.
+ It's a bit lighter and easily wraps to a new line.
+ </FormText>
+ </FormGroup>
+ <FormGroup tag="fieldset">
+ <legend>Radio Buttons</legend>
+ <FormGroup check>
+ <Label check>
+ <Input type="radio" name="radio1" />{' '}
+ Option one is this and that—be sure to include why it's great
+ </Label>
+ </FormGroup>
+ <FormGroup check>
+ <Label check>
+ <Input type="radio" name="radio1" />{' '}
+ Option two can be something else and selecting it will deselect option one
+ </Label>
+ </FormGroup>
+ <FormGroup check disabled>
+ <Label check>
+ <Input type="radio" name="radio1" disabled />{' '}
+ Option three is disabled
+ </Label>
+ </FormGroup>
+ </FormGroup>
+ <FormGroup check>
+ <Label check>
+ <Input type="checkbox" />{' '}
+ Check me out
+ </Label>
+ </FormGroup>
+ <Button>Submit</Button>
+ </Form>
+ );
+}
+
+export default Example;
+Properties Input.propTypes = {
+ children: PropTypes.node,
+ // type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
+ type: PropTypes.string,
+ size: PropTypes.string,
+ bsSize: PropTypes.string,
+ state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
+ valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
+ invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ // ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
+ plaintext: PropTypes.bool,
+ addon: PropTypes.bool,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+};
+
+CustomInput.propTypes = {
+ className: PropTypes.string,
+ id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+ type: PropTypes.string.isRequired, // radio, checkbox, select, range, switch, file.
+ label: PropTypes.string, // used for checkbox and radios
+ inline: PropTypes.bool,
+ valid: PropTypes.bool, // applied the is-valid class when true, does nothing when false
+ invalid: PropTypes.bool, // applied the is-invalid class when true, does nothing when false
+ bsSize: PropTypes.string,
+ cssModule: PropTypes.object,
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.array, PropTypes.func]), // for type="select"
+ // innerRef would be referenced to select node or input DOM node, depends on type property
+ innerRef: PropTypes.oneOfType([
+ PropTypes.object,
+ PropTypes.string,
+ PropTypes.func,
+ ])
+};
+
+Form.propTypes = {
+ children: PropTypes.node,
+ inline: PropTypes.bool,
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'form'
+ innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func, PropTypes.string]),
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+};
+
+FormFeedback.propTypes = {
+ children: PropTypes.node,
+ // Pass in a Component to override default element
+ tag: PropTypes.string, // default: 'div'
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ valid: PropTypes.bool, // default: undefined
+ // The parent element must contain the 'position: relative' style to work
+ tooltip: PropTypes.bool
+};
+
+FormGroup.propTypes = {
+ children: PropTypes.node,
+ // Applied the row class when true, does nothing when false
+ row: PropTypes.bool,
+ // Applied the form-check class when true, form-group when false
+ check: PropTypes.bool,
+ inline: PropTypes.bool,
+ // Applied the disabled class when the check and disabled props are true, does nothing when false
+ disabled: PropTypes.bool,
+ // Pass in a Component to override default element
+ tag: PropTypes.string, // default: 'div'
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+};
+
+FormText.propTypes = {
+ children: PropTypes.node,
+ inline: PropTypes.bool,
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), // default: 'small'
+ color: PropTypes.string, // default: 'muted'
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+};import React from 'react';
+import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup row>
+ <Label for="exampleEmail" sm={2}>Email</Label>
+ <Col sm={10}>
+ <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="examplePassword" sm={2}>Password</Label>
+ <Col sm={10}>
+ <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="exampleSelect" sm={2}>Select</Label>
+ <Col sm={10}>
+ <Input type="select" name="select" id="exampleSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="exampleSelectMulti" sm={2}>Select Multiple</Label>
+ <Col sm={10}>
+ <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="exampleText" sm={2}>Text Area</Label>
+ <Col sm={10}>
+ <Input type="textarea" name="text" id="exampleText" />
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="exampleFile" sm={2}>File</Label>
+ <Col sm={10}>
+ <Input type="file" name="file" id="exampleFile" />
+ <FormText color="muted">
+ This is some placeholder block-level help text for the above input.
+ It's a bit lighter and easily wraps to a new line.
+ </FormText>
+ </Col>
+ </FormGroup>
+ <FormGroup tag="fieldset" row>
+ <legend className="col-form-label col-sm-2">Radio Buttons</legend>
+ <Col sm={10}>
+ <FormGroup check>
+ <Label check>
+ <Input type="radio" name="radio2" />{' '}
+ Option one is this and that—be sure to include why it's great
+ </Label>
+ </FormGroup>
+ <FormGroup check>
+ <Label check>
+ <Input type="radio" name="radio2" />{' '}
+ Option two can be something else and selecting it will deselect option one
+ </Label>
+ </FormGroup>
+ <FormGroup check disabled>
+ <Label check>
+ <Input type="radio" name="radio2" disabled />{' '}
+ Option three is disabled
+ </Label>
+ </FormGroup>
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="checkbox2" sm={2}>Checkbox</Label>
+ <Col sm={{ size: 10 }}>
+ <FormGroup check>
+ <Label check>
+ <Input type="checkbox" id="checkbox2" />{' '}
+ Check me out
+ </Label>
+ </FormGroup>
+ </Col>
+ </FormGroup>
+ <FormGroup check row>
+ <Col sm={{ size: 10, offset: 2 }}>
+ <Button>Submit</Button>
+ </Col>
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { Col, Row, Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <Row form>
+ <Col md={6}>
+ <FormGroup>
+ <Label for="exampleEmail">Email</Label>
+ <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
+ </FormGroup>
+ </Col>
+ <Col md={6}>
+ <FormGroup>
+ <Label for="examplePassword">Password</Label>
+ <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
+ </FormGroup>
+ </Col>
+ </Row>
+ <FormGroup>
+ <Label for="exampleAddress">Address</Label>
+ <Input type="text" name="address" id="exampleAddress" placeholder="1234 Main St"/>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleAddress2">Address 2</Label>
+ <Input type="text" name="address2" id="exampleAddress2" placeholder="Apartment, studio, or floor"/>
+ </FormGroup>
+ <Row form>
+ <Col md={6}>
+ <FormGroup>
+ <Label for="exampleCity">City</Label>
+ <Input type="text" name="city" id="exampleCity"/>
+ </FormGroup>
+ </Col>
+ <Col md={4}>
+ <FormGroup>
+ <Label for="exampleState">State</Label>
+ <Input type="text" name="state" id="exampleState"/>
+ </FormGroup>
+ </Col>
+ <Col md={2}>
+ <FormGroup>
+ <Label for="exampleZip">Zip</Label>
+ <Input type="text" name="zip" id="exampleZip"/>
+ </FormGroup>
+ </Col>
+ </Row>
+ <FormGroup check>
+ <Input type="checkbox" name="check" id="exampleCheck"/>
+ <Label for="exampleCheck" check>Check me out</Label>
+ </FormGroup>
+ <Button>Sign in</Button>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form inline>
+ <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
+ <Label for="exampleEmail" className="mr-sm-2">Email</Label>
+ <Input type="email" name="email" id="exampleEmail" placeholder="something@idk.cool" />
+ </FormGroup>
+ <FormGroup className="mb-2 mr-sm-2 mb-sm-0">
+ <Label for="examplePassword" className="mr-sm-2">Password</Label>
+ <Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
+ </FormGroup>
+ <Button>Submit</Button>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { Form, FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup>
+ <Label for="exampleEmail">Input without validation</Label>
+ <Input />
+ <FormFeedback>You will not be able to see this</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleEmail">Valid input</Label>
+ <Input valid />
+ <FormFeedback valid>Sweet! that name is available</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ <FormGroup>
+ <Label for="examplePassword">Invalid input</Label>
+ <Input invalid />
+ <FormFeedback>Oh noes! that name is already taken</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleEmail">Input without validation</Label>
+ <Input />
+ <FormFeedback tooltip>You will not be able to see this</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ <FormGroup className="position-relative">
+ <Label for="exampleEmail">Valid input</Label>
+ <Input valid />
+ <FormFeedback valid tooltip>Sweet! that name is available</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ <FormGroup className="position-relative">
+ <Label for="examplePassword">Invalid input</Label>
+ <Input invalid />
+ <FormFeedback tooltip>Oh noes! that name is already taken</FormFeedback>
+ <FormText>Example help text that remains unchanged.</FormText>
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { Form, FormGroup, Label, Input, FormText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup>
+ <Label for="exampleEmail">Plain Text (Static)</Label>
+ <Input plaintext value="Some plain text/ static value" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleEmail">Email</Label>
+ <Input
+ type="email"
+ name="email"
+ id="exampleEmail"
+ placeholder="with a placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="examplePassword">Password</Label>
+ <Input
+ type="password"
+ name="password"
+ id="examplePassword"
+ placeholder="password placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleUrl">Url</Label>
+ <Input
+ type="url"
+ name="url"
+ id="exampleUrl"
+ placeholder="url placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleNumber">Number</Label>
+ <Input
+ type="number"
+ name="number"
+ id="exampleNumber"
+ placeholder="number placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleDatetime">Datetime</Label>
+ <Input
+ type="datetime"
+ name="datetime"
+ id="exampleDatetime"
+ placeholder="datetime placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleDate">Date</Label>
+ <Input
+ type="date"
+ name="date"
+ id="exampleDate"
+ placeholder="date placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleTime">Time</Label>
+ <Input
+ type="time"
+ name="time"
+ id="exampleTime"
+ placeholder="time placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleColor">Color</Label>
+ <Input
+ type="color"
+ name="color"
+ id="exampleColor"
+ placeholder="color placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleSearch">Search</Label>
+ <Input
+ type="search"
+ name="search"
+ id="exampleSearch"
+ placeholder="search placeholder"
+ />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleSelect">Select</Label>
+ <Input type="select" name="select" id="exampleSelect">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleSelectMulti">Select Multiple</Label>
+ <Input
+ type="select"
+ name="selectMulti"
+ id="exampleSelectMulti"
+ multiple
+ >
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </Input>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleText">Text Area</Label>
+ <Input type="textarea" name="text" id="exampleText" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleFile">File</Label>
+ <Input type="file" name="file" id="exampleFile" />
+ <FormText color="muted">
+ This is some placeholder block-level help text for the above input.
+ It's a bit lighter and easily wraps to a new line.
+ </FormText>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleRange">Range</Label>
+ <Input type="range" name="range" id="exampleRange" />
+ </FormGroup>
+ <FormGroup check>
+ <Label check>
+ <Input type="radio" /> Option one is this and that—be sure to
+ include why it's great
+ </Label>
+ </FormGroup>
+ <FormGroup check>
+ <Label check>
+ <Input type="checkbox" /> Check me out
+ </Label>
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+Inline checkboxes import React from 'react';
+import { Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup check inline>
+ <Label check>
+ <Input type="checkbox" /> Some input
+ </Label>
+ </FormGroup>
+ <FormGroup check inline>
+ <Label check>
+ <Input type="checkbox" /> Some other input
+ </Label>
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+
import React from 'react';
+import { Form, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <Input placeholder="lg" bsSize="lg" />
+ <Input placeholder="default" />
+ <Input placeholder="sm" bsSize="sm" />
+ <Input type="select" bsSize="lg">
+ <option>Large Select</option>
+ </Input>
+ <Input type="select">
+ <option>Default Select</option>
+ </Input>
+ <Input type="select" bsSize="sm">
+ <option>Small Select</option>
+ </Input>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { Col, Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup row>
+ <Label for="exampleEmail" sm={2} size="lg">Email</Label>
+ <Col sm={10}>
+ <Input type="email" name="email" id="exampleEmail" placeholder="lg" bsSize="lg" />
+ </Col>
+ </FormGroup>
+ <FormGroup row>
+ <Label for="exampleEmail2" sm={2}>Email</Label>
+ <Col sm={10}>
+ <Input type="email" name="email" id="exampleEmail2" placeholder="default" />
+ </Col>
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+Hidden Labels import React from 'react';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form inline>
+ <FormGroup>
+ <Label for="exampleEmail" hidden>Email</Label>
+ <Input type="email" name="email" id="exampleEmail" placeholder="Email" />
+ </FormGroup>
+ {' '}
+ <FormGroup>
+ <Label for="examplePassword" hidden>Password</Label>
+ <Input type="password" name="password" id="examplePassword" placeholder="Password" />
+ </FormGroup>
+ {' '}
+ <Button>Submit</Button>
+ </Form>
+ );
+}
+
+export default Example;
+import React from 'react';
+import { CustomInput, Form, FormGroup, Label } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Form>
+ <FormGroup>
+ <Label for="exampleCheckbox">Checkboxes</Label>
+ <div>
+ <CustomInput type="checkbox" id="exampleCustomCheckbox" label="Check this custom checkbox" />
+ <CustomInput type="checkbox" id="exampleCustomCheckbox2" label="Or this one" />
+ <CustomInput type="checkbox" id="exampleCustomCheckbox3" label="But not this disabled one" disabled />
+ <CustomInput type="checkbox" id="exampleCustomCheckbox4" label="Can't click this label to check!" htmlFor="exampleCustomCheckbox4_X" disabled />
+ </div>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCheckbox">Radios</Label>
+ <div>
+ <CustomInput type="radio" id="exampleCustomRadio" name="customRadio" label="Select this custom radio" />
+ <CustomInput type="radio" id="exampleCustomRadio2" name="customRadio" label="Or this one" />
+ <CustomInput type="radio" id="exampleCustomRadio3" label="But not this disabled one" disabled />
+ <CustomInput type="radio" id="exampleCustomRadio4" label="Can't click this label to select!" htmlFor="exampleCustomRadio4_X" disabled />
+ </div>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCheckbox">Switches</Label>
+ <div>
+ <CustomInput type="switch" id="exampleCustomSwitch" name="customSwitch" label="Turn on this custom switch" />
+ <CustomInput type="switch" id="exampleCustomSwitch2" name="customSwitch" label="Or this one" />
+ <CustomInput type="switch" id="exampleCustomSwitch3" label="But not this disabled one" disabled />
+ <CustomInput type="switch" id="exampleCustomSwitch4" label="Can't click this label to turn on!" htmlFor="exampleCustomSwitch4_X" disabled />
+ </div>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCheckbox">Inline</Label>
+ <div>
+ <CustomInput type="checkbox" id="exampleCustomInline" label="An inline custom input" inline />
+ <CustomInput type="checkbox" id="exampleCustomInline2" label="and another one" inline />
+ </div>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomSelect">Custom Select</Label>
+ <CustomInput type="select" id="exampleCustomSelect" name="customSelect">
+ <option value="">Select</option>
+ <option>Value 1</option>
+ <option>Value 2</option>
+ <option>Value 3</option>
+ <option>Value 4</option>
+ <option>Value 5</option>
+ </CustomInput>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomMutlipleSelect">Custom Multiple Select</Label>
+ <CustomInput type="select" id="exampleCustomMutlipleSelect" name="customSelect" multiple>
+ <option value="">Select</option>
+ <option>Value 1</option>
+ <option>Value 2</option>
+ <option>Value 3</option>
+ <option>Value 4</option>
+ <option>Value 5</option>
+ </CustomInput>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomSelectDisabled">Custom Select Disabled</Label>
+ <CustomInput type="select" id="exampleCustomSelectDisabled" name="customSelect" disabled>
+ <option value="">Select</option>
+ <option>Value 1</option>
+ <option>Value 2</option>
+ <option>Value 3</option>
+ <option>Value 4</option>
+ <option>Value 5</option>
+ </CustomInput>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomMutlipleSelectDisabled">Custom Multiple Select Disabled</Label>
+ <CustomInput type="select" id="exampleCustomMutlipleSelectDisabled" name="customSelect" multiple disabled>
+ <option value="">Select</option>
+ <option>Value 1</option>
+ <option>Value 2</option>
+ <option>Value 3</option>
+ <option>Value 4</option>
+ <option>Value 5</option>
+ </CustomInput>
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomRange">Custom Range</Label>
+ <CustomInput type="range" id="exampleCustomRange" name="customRange" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomFileBrowser">File Browser</Label>
+ <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomFileBrowser">File Browser with Custom Label</Label>
+ <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" label="Yo, pick a file!" />
+ </FormGroup>
+ <FormGroup>
+ <Label for="exampleCustomFileBrowser">File Browser Disabled</Label>
+ <CustomInput type="file" id="exampleCustomFileBrowser" name="customFile" disabled />
+ </FormGroup>
+ </Form>
+ );
+}
+
+export default Example;
+reactstrap - Input Group
+ Input Group import React from 'react';
+import { InputGroup, InputGroupAddon, InputGroupText, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText>@</InputGroupText>
+ </InputGroupAddon>
+ <Input placeholder="username" />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText>
+ <Input addon type="checkbox" aria-label="Checkbox for following text input" />
+ </InputGroupText>
+ </InputGroupAddon>
+ <Input placeholder="Check it out" />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <Input placeholder="username" />
+ <InputGroupAddon addonType="append">
+ <InputGroupText>@example.com</InputGroupText>
+ </InputGroupAddon>
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText>$</InputGroupText>
+ <InputGroupText>$</InputGroupText>
+ </InputGroupAddon>
+ <Input placeholder="Dolla dolla billz yo!" />
+ <InputGroupAddon addonType="append">
+ <InputGroupText>$</InputGroupText>
+ <InputGroupText>$</InputGroupText>
+ </InputGroupAddon>
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">$</InputGroupAddon>
+ <Input placeholder="Amount" min={0} max={100} type="number" step="1" />
+ <InputGroupAddon addonType="append">.00</InputGroupAddon>
+ </InputGroup>
+ </div>
+ );
+};
+
+export default Example;
+Properties InputGroup.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ size: PropTypes.string,
+ className: PropTypes.string
+};
+
+InputGroupAddOn.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
+ className: PropTypes.string
+};
+
+InputGroupButton.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ addonType: PropTypes.oneOf(['prepend', 'append']).isRequired,
+ children: PropTypes.node,
+ groupClassName: PropTypes.string, // only used in shorthand
+ groupAttributes: PropTypes.object, // only used in shorthand
+ className: PropTypes.string
+};Addons import React from 'react';
+import { InputGroup, InputGroupText, InputGroupAddon, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText>To the Left!</InputGroupText>
+ </InputGroupAddon>
+ <Input />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <Input />
+ <InputGroupAddon addonType="append">
+ <InputGroupText>To the Right!</InputGroupText>
+ </InputGroupAddon>
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <InputGroupText>To the Left!</InputGroupText>
+ </InputGroupAddon>
+ <Input placeholder="and..." />
+ <InputGroupAddon addonType="append">
+ <InputGroupText>To the Right!</InputGroupText>
+ </InputGroupAddon>
+ </InputGroup>
+ </div>
+ );
+};
+
+export default Example;
+Addon Sizing import React from 'react';
+import { InputGroup, InputGroupAddon, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <InputGroup size="lg">
+ <InputGroupAddon addonType="prepend">@lg</InputGroupAddon>
+ <Input />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">@normal</InputGroupAddon>
+ <Input />
+ </InputGroup>
+ <br />
+ <InputGroup size="sm">
+ <InputGroupAddon addonType="prepend">@sm</InputGroupAddon>
+ <Input />
+ </InputGroup>
+ </div>
+ );
+};
+
+export default Example;
+import React, { useState } from 'react';
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButtonDropdown,
+ Input,
+ Button,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem
+ } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+ const [splitButtonOpen, setSplitButtonOpen] = useState(false);
+
+ const toggleDropDown = () => setDropdownOpen(!dropdownOpen);
+
+ const toggleSplit = () => setSplitButtonOpen(!splitButtonOpen);
+
+ return (
+ <div>
+ <InputGroup>
+ <InputGroupAddon addonType="prepend"><Button>I'm a button</Button></InputGroupAddon>
+ <Input />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <Input />
+ <InputGroupButtonDropdown addonType="append" isOpen={dropdownOpen} toggle={toggleDropDown}>
+ <DropdownToggle caret>
+ Button Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </InputGroupButtonDropdown>
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupButtonDropdown addonType="prepend" isOpen={splitButtonOpen} toggle={toggleSplit}>
+ <Button outline>Split Button</Button>
+ <DropdownToggle split outline />
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </InputGroupButtonDropdown>
+ <Input placeholder="and..." />
+ <InputGroupAddon addonType="append"><Button color="secondary">I'm a button</Button></InputGroupAddon>
+ </InputGroup>
+ </div>
+ );
+}
+
+
+export default Example;
+Button shorthand is deprecated. Below are the updated examples of how to use InputGroupAddon to accomplish the same output.
Button shorthand is a convenience method for adding just a button. It is triggered when only a single string is the child. A Button will be created and all of the props will be passed to it with the exception ofgroupClassName and groupAttributes, which are used to added classes and attributes to the wrapping container. This means you can add your onClick and other handlers directly toInputGroupButton. If you want your string to not be wrapped in a button, then you really want to use InputGroupAddon (see Addons above for that).
import React from 'react';
+import { InputGroup, InputGroupAddon, Button, Input } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <Button>To the Left!</Button>
+ </InputGroupAddon>
+ <Input />
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <Input />
+ <InputGroupAddon addonType="append">
+ <Button color="secondary">To the Right!</Button>
+ </InputGroupAddon>
+ </InputGroup>
+ <br />
+ <InputGroup>
+ <InputGroupAddon addonType="prepend">
+ <Button color="danger">To the Left!</Button>
+ </InputGroupAddon>
+ <Input placeholder="and..." />
+ <InputGroupAddon addonType="append">
+ <Button color="success">To the Right!</Button>
+ </InputGroupAddon>
+ </InputGroup>
+ </div>
+ );
+};
+
+export default Example;
+reactstrap - Jumbotron
+ Jumbotron Hello, world! This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn More
import React from 'react';
+import { Jumbotron, Button } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Jumbotron>
+ <h1 className="display-3">Hello, world!</h1>
+ <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra attention to featured content or information.</p>
+ <hr className="my-2" />
+ <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
+ <p className="lead">
+ <Button color="primary">Learn More</Button>
+ </p>
+ </Jumbotron>
+ </div>
+ );
+};
+
+export default Example;
+Properties Jumbotron.propTypes = {
+ // Pass in a Component to override default element
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ fluid: PropTypes.bool,
+ className: PropTypes.string
+};Fluid Jumbotron Fluid jumbotron This is a modified jumbotron that occupies the entire horizontal space of its parent.
import React from 'react';
+import { Jumbotron, Container } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Jumbotron fluid>
+ <Container fluid>
+ <h1 className="display-3">Fluid jumbotron</h1>
+ <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
+ </Container>
+ </Jumbotron>
+ </div>
+ );
+};
+
+export default Example;
+reactstrap - Layout Components (Container, Row, Col)
+ Layout Components (Container, Row, Col) .col-3
.col-auto - variable width content
.col-3
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-sm-4
.col-sm-6 .order-sm-2 .offset-sm-1
.col-sm-12 .col-md-6 .offset-md-3
.col-sm-auto .offset-sm-1
.col-sm-auto .offset-sm-1
import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Container>
+ <Row>
+ <Col>.col</Col>
+ </Row>
+ <Row>
+ <Col>.col</Col>
+ <Col>.col</Col>
+ <Col>.col</Col>
+ <Col>.col</Col>
+ </Row>
+ <Row>
+ <Col xs="3">.col-3</Col>
+ <Col xs="auto">.col-auto - variable width content</Col>
+ <Col xs="3">.col-3</Col>
+ </Row>
+ <Row>
+ <Col xs="6">.col-6</Col>
+ <Col xs="6">.col-6</Col>
+ </Row>
+ <Row>
+ <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
+ <Col xs="6" sm="4">.col-6 .col-sm-4</Col>
+ <Col sm="4">.col-sm-4</Col>
+ </Row>
+ <Row>
+ <Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .order-sm-2 .offset-sm-1</Col>
+ </Row>
+ <Row>
+ <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col>
+ </Row>
+ <Row>
+ <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
+ <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col>
+ </Row>
+ </Container>
+ );
+}
+
+export default Example;
+Container Properties Container.propTypes = {
+ fluid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string])
+ // applies .container-fluid class if bool or .container-{breakpoint} if string
+}Row Properties Row.propTypes = {
+ noGutters: PropTypes.bool,
+ // see https://reactstrap.github.io/components/form Form Grid with Form Row
+ form: PropTypes.bool,
+ xs: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ sm: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ md: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ lg: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+ xl: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+}Col Properties const stringOrNumberProp = PropTypes.oneOfType([PropTypes.number, PropTypes.string]);
+const columnProps = PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.bool,
+ PropTypes.shape({
+ size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
+ // example size values:
+ // 12 || "12" => col-12 or col-`width`-12
+ // auto => col-auto or col-`width`-auto
+ // true => col or col-`width`
+ order: stringOrNumberProp,
+ offset: stringOrNumberProp
+ })
+]);
+
+Col.propTypes = {
+ xs: columnProps,
+ sm: columnProps,
+ md: columnProps,
+ lg: columnProps,
+ xl: columnProps,
+ // override the predefined width (the ones above) with your own custom widths.
+ // see https://github.com/reactstrap/reactstrap/issues/297#issuecomment-273556116
+ widths: PropTypes.array,
+}Container .container
.container-sm
.container-md
.container-lg
.container-xl
.container-fluid
import React from 'react';
+import { Container } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <>
+ <Container className="themed-container">.container</Container>
+ <Container className="themed-container" fluid="sm">.container-sm</Container>
+ <Container className="themed-container" fluid="md">.container-md</Container>
+ <Container className="themed-container" fluid="lg">.container-lg</Container>
+ <Container className="themed-container" fluid="xl">.container-xl</Container>
+ <Container className="themed-container" fluid={true}>.container-fluid</Container>
+ </>
+ );
+}
+
+export default Example;
+Row Columns import React from 'react';
+import { Container, Row, Col } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Container>
+ <Row xs="2">
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ </Row>
+ <Row xs="3">
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ </Row>
+ <Row xs="4">
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ </Row>
+ <Row xs="4">
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col xs="6">Column</Col>
+ <Col>Column</Col>
+ </Row>
+ <Row xs="1" sm="2" md="4">
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ <Col>Column</Col>
+ </Row>
+ </Container>
+ );
+}
+
+export default Example;
+reactstrap - ListGroup
+ ListGroup Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup>
+ <ListGroupItem>Cras justo odio</ListGroupItem>
+ <ListGroupItem>Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem>Morbi leo risus</ListGroupItem>
+ <ListGroupItem>Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem>Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ );
+
+}
+
+export default Example;
+Properties ListGroup.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ // boolean to render list group items edge-to-edge in a parent container
+ flush: PropTypes.bool,
+ // boolean to render list group items horizontal. string for specific breakpoint, or true to be always horizontal
+ horizontal: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ }Tags Cras justo odio 14 Dapibus ac facilisis in 2 Morbi leo risus 1 import React from 'react';
+import { ListGroup, ListGroupItem, Badge } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup>
+ <ListGroupItem className="justify-content-between">Cras justo odio <Badge pill>14</Badge></ListGroupItem>
+ <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge pill>2</Badge></ListGroupItem>
+ <ListGroupItem className="justify-content-between">Morbi leo risus <Badge pill>1</Badge></ListGroupItem>
+ </ListGroup>
+ );
+}
+
+export default Example;
+Disabled items import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup>
+ <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ );
+}
+
+export default Example;
+
+Anchors and buttons Note: you need add action props to make these buttons fit the list.
Anchors Be sure to not use the standard .btn classes here .
Buttons Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <h3>Anchors </h3>
+ <p>Be sure to <strong>not use the standard <code>.btn</code> classes here</strong>.</p>
+ <ListGroup>
+ <ListGroupItem active tag="a" href="#" action>Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="a" href="#" action>Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="a" href="#" action>Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ <p />
+ <h3>Buttons </h3>
+ <ListGroup>
+ <ListGroupItem active tag="button" action>Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="button" action>Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="button" action>Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="button" action>Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem disabled tag="button" action>Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ </div>
+ );
+}
+
+export default Example;
+Contextual classes Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup>
+ <ListGroupItem color="success">Cras justo odio</ListGroupItem>
+ <ListGroupItem color="info">Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem color="warning">Morbi leo risus</ListGroupItem>
+ <ListGroupItem color="danger">Porta ac consectetur ac</ListGroupItem>
+ </ListGroup>
+ );
+
+}
+
+export default Example;
+Custom content 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.
import React from 'react';
+import { ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup>
+ <ListGroupItem active>
+ <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+ <ListGroupItemText>
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ </ListGroupItemText>
+ </ListGroupItem>
+ <ListGroupItem>
+ <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+ <ListGroupItemText>
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ </ListGroupItemText>
+ </ListGroupItem>
+ <ListGroupItem>
+ <ListGroupItemHeading>List group item heading</ListGroupItemHeading>
+ <ListGroupItemText>
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+ </ListGroupItemText>
+ </ListGroupItem>
+ </ListGroup>
+ );
+}
+
+export default Example;
+Flush import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <ListGroup flush>
+ <ListGroupItem disabled tag="a" href="#">Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ );
+
+}
+
+export default Example;
+Horizontal The horizontal prop can be a Boolean or a string specifying one of Bootstrap's breakpoints
This list group is horizontal at the lg breakpoint and up.
Note that horizontal list groups cannot be combined with flush list groups. If flush is true then horizontal has no effect.
import React from 'react';
+import { ListGroup, ListGroupItem } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <p>The <code>horizontal</code> prop can be a Boolean or a string specifying one of Bootstrap's breakpoints</p>
+ <ListGroup horizontal>
+ <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ <p className="mt-3">This list group is horizontal at the <code>lg</code> breakpoint and up.</p>
+ <ListGroup horizontal="lg">
+ <ListGroupItem tag="a" href="#">Cras justo odio</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Dapibus ac facilisis in</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Morbi leo risus</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Porta ac consectetur ac</ListGroupItem>
+ <ListGroupItem tag="a" href="#">Vestibulum at eros</ListGroupItem>
+ </ListGroup>
+ <p className="mt-3">Note that horizontal list groups cannot be combined with flush list groups. If <code>flush</code> is <code>true</code> then <code>horizontal</code> has no effect.</p>
+ </div>
+
+ );
+}
+
+export default Example;
+reactstrap - Media object
+ Media object import React from 'react';
+import { Media } from 'reactstrap';
+
+const Example = () => {
+ return (
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Media heading
+ </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.
+ </Media>
+ </Media>
+ );
+};
+
+export default Example;
+Properties Media.propTypes = {
+ body: PropTypes.bool,
+ bottom: PropTypes.bool,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ heading: PropTypes.bool,
+ left: PropTypes.bool,
+ list: PropTypes.bool,
+ middle: PropTypes.bool,
+ object: PropTypes.bool,
+ right: PropTypes.bool,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ top: PropTypes.bool,
+};Nesting import React from 'react';
+import { Media } from 'reactstrap';
+
+const Example = () => {
+ return (
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Media heading
+ </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.
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Nested media heading
+ </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.
+ </Media>
+ </Media>
+ </Media>
+ </Media>
+ );
+};
+
+export default Example;
+Alignment import React from 'react';
+import { Media } from 'reactstrap';
+
+const Example = () => {
+ return (
+ <div>
+ <Media>
+ <Media left top href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Top aligned media
+ </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.
+ </Media>
+ </Media>
+ <Media className="mt-1">
+ <Media left middle href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Middle aligned media
+ </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.
+ </Media>
+ </Media>
+ <Media className="mt-1">
+ <Media left bottom href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Bottom aligned media
+ </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.
+ </Media>
+ </Media>
+ </div>
+ );
+};
+
+export default Example;
+Media list import React from 'react';
+import { Media } from 'reactstrap';
+
+const Example = () => {
+ return (
+ <Media list>
+ <Media tag="li">
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Media heading
+ </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.
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Nested media heading
+ </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.
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Nested media heading
+ </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.
+ </Media>
+ </Media>
+ </Media>
+ </Media>
+ <Media>
+ <Media left href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ <Media body>
+ <Media heading>
+ Nested media heading
+ </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.
+ </Media>
+ </Media>
+ </Media>
+ </Media>
+ <Media tag="li">
+ <Media body>
+ <Media heading>
+ Media heading
+ </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.
+ </Media>
+ <Media right href="#">
+ <Media object data-src="holder.js/64x64" alt="Generic placeholder image" />
+ </Media>
+ </Media>
+ </Media>
+ );
+};
+
+export default Example;
+reactstrap - Modals
+ Modals Launch Modal with custom className
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Properties Modal.propTypes = {
+ // boolean to control the state of the popover
+ isOpen: PropTypes.bool,
+ autoFocus: PropTypes.bool,
+ // if modal should be centered vertically in viewport
+ centered: PropTypes.bool,
+ // corresponds to bootstrap's modal sizes, ie. 'lg' or 'sm'
+ size: PropTypes.string,
+ // callback for toggling isOpen in the controlling component
+ toggle: PropTypes.func,
+ role: PropTypes.string, // defaults to "dialog"
+ // used to reference the ID of the title element in the modal
+ labelledBy: PropTypes.string,
+ keyboard: PropTypes.bool,
+ // control backdrop, see http://v4-alpha.getbootstrap.com/components/modal/#options
+ backdrop: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf(['static'])
+ ]),
+ // if body of modal should be scrollable when content is long
+ scrollable: PropTypes.bool,
+ // allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons
+ external: PropTypes.node,
+ // called on componentDidMount
+ onEnter: PropTypes.func,
+ // called on componentWillUnmount
+ onExit: PropTypes.func,
+ // called when done transitioning in
+ onOpened: PropTypes.func,
+ // called when done transitioning out
+ onClosed: PropTypes.func,
+ className: PropTypes.string,
+ wrapClassName: PropTypes.string,
+ modalClassName: PropTypes.string,
+ backdropClassName: PropTypes.string,
+ contentClassName: PropTypes.string,
+ // boolean to control whether the fade transition occurs (default: true)
+ fade: PropTypes.bool,
+ cssModule: PropTypes.object,
+ // zIndex defaults to 1000.
+ zIndex: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ ]),
+ // backdropTransition - controls backdrop transition
+ // timeout is 150ms by default to match bootstrap
+ // see [Fade](/components/fade/) for more details
+ backdropTransition: PropTypes.shape(Fade.propTypes),
+ // modalTransition - controls modal transition
+ // timeout is 300ms by default to match bootstrap
+ // see [Fade](/components/fade/) for more details
+ modalTransition: PropTypes.shape(Fade.propTypes),
+ innerRef: PropTypes.object,
+ // if modal should be destructed/removed from DOM after closing
+ unmountOnClose: PropTypes.bool, // defaults to true
+ // if the element which triggered the modal to open should focused after the modal closes (see example somewhere below)
+ returnFocusAfterClose: PropTypes.bool, // defaults to true
+ // container to append the modal to
+ container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
+ trapFocus: PropTypes.bool // Traps focus within modal
+}Backdrop /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ 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.value;
+ if (value !== 'static') {
+ value = JSON.parse(value);
+ }
+ setBackdrop(value);
+ }
+
+ const changeKeyboard = e => {
+ setKeyboard(e.currentTarget.checked);
+ }
+
+ return (
+ <div>
+ <Form inline onSubmit={(e) => e.preventDefault()}>
+ <FormGroup>
+ <Label for="backdrop">Backdrop value</Label>{' '}
+ <Input type="select" name="backdrop" id="backdrop" onChange={changeBackdrop}>
+ <option value="true">true</option>
+ <option value="false">false</option>
+ <option value="static">"static"</option>
+ </Input>
+ </FormGroup>
+ <FormGroup className="mx-2" check>
+ <Label check>
+ <Input type="checkbox" checked={keyboard} onChange={changeKeyboard} /> Keyboard
+ </Label>
+ </FormGroup>
+ {' '}
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ </Form>
+ <Modal isOpen={modal} toggle={toggle} className={className} backdrop={backdrop} keyboard={keyboard}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Nested Modals Launch Modal w/ Nested Example
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = 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 (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ <br />
+ <Button color="success" onClick={toggleNested}>Show Nested Modal</Button>
+ <Modal isOpen={nestedModal} toggle={toggleNested} onClosed={closeAll ? toggle : undefined}>
+ <ModalHeader>Nested Modal title</ModalHeader>
+ <ModalBody>Stuff and things</ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggleNested}>Done</Button>{' '}
+ <Button color="secondary" onClick={toggleAll}>All Done</Button>
+ </ModalFooter>
+ </Modal>
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Modals with Custom Transition Timeouts Launch Modal with Custom Transition Timeouts Example
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} modalTransition={{ timeout: 700 }} backdropTransition={{ timeout: 1300 }}
+ toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Modals without Fade Effect Launch Modal without Fade Effect Example
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} fade={false} toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Modals with external button Launch Modal with external close button
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ const externalCloseBtn = <button className="close" style={{ position: 'absolute', top: '15px', right: '15px' }} onClick={toggle}>×</button>;
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} toggle={toggle} className={className} external={externalCloseBtn}>
+ <ModalHeader>Modal title</ModalHeader>
+ <ModalBody>
+ <b>Look at the top right of the page/viewport!</b><br />
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Modals with custom close icon Launch Modal with custom close Icon
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle} charCode="Y">Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Modals with custom close button Launch Modal with custom close button
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+
+ const toggle = () => setModal(!modal);
+
+ const closeBtn = <button className="close" onClick={toggle}>×</button>;
+
+ return (
+ <div>
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ <Modal isOpen={modal} toggle={toggle} className={className}>
+ <ModalHeader toggle={toggle} close={closeBtn}>Modal title</ModalHeader>
+ <ModalBody>
+ 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.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+);
+}
+
+export default ModalExample;
+Destructuring /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup } from 'reactstrap';
+
+const ModalExample = (props) => {
+ const {
+ buttonLabel,
+ className
+ } = props;
+
+ const [modal, setModal] = useState(false);
+ const [unmountOnClose, setUnmountOnClose] = useState(true);
+
+ const toggle = () => setModal(!modal);
+ const changeUnmountOnClose = e => {
+ let value = e.target.value;
+ setUnmountOnClose(JSON.parse(value));
+ }
+
+ return (
+ <div>
+ <Form inline onSubmit={(e) => e.preventDefault()}>
+ <FormGroup>
+ <Label for="unmountOnClose">UnmountOnClose value</Label>{' '}
+ <Input type="select" name="unmountOnClose" id="unmountOnClose" onChange={changeUnmountOnClose}>
+ <option value="true">true</option>
+ <option value="false">false</option>
+ </Input>
+ </FormGroup>
+ {' '}
+ <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
+ </Form>
+ <Modal isOpen={modal} toggle={toggle} className={className} unmountOnClose={unmountOnClose}>
+ <ModalHeader toggle={toggle}>Modal title</ModalHeader>
+ <ModalBody>
+ <Input type="textarea" placeholder="Write something (data should remain in modal if unmountOnClose is set to false)" rows={5} />
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
+ <Button color="secondary" onClick={toggle}>Cancel</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ );
+}
+
+export default ModalExample;
+Focus after close /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Modal, ModalBody, ModalFooter, Label, Input, FormGroup, Form } from 'reactstrap';
+
+const 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 (
+ <div>
+ <Form inline onSubmit={(e) => e.preventDefault()}>
+ <FormGroup>
+ <Label for="focusAfterClose">Focus After Close</Label>
+ <Input className="mx-2" type="select" id="focusAfterClose" onChange={handleSelectChange}>
+ <option value="true">Yes</option>
+ <option value="false">No</option>
+ </Input>
+ </FormGroup>
+ <Button color="danger" onClick={toggle}>Open</Button>
+ </Form>
+ <Modal returnFocusAfterClose={focusAfterClose} isOpen={open}>
+ <ModalBody>
+ Observe the "Open" button. It will be focused after close when "returnFocusAfterClose" is true and will not be focused if "returnFocusAfterClose" is false.
+ </ModalBody>
+ <ModalFooter>
+ <Button color="primary" onClick={toggle}>Close</Button>
+ </ModalFooter>
+ </Modal>
+ </div>
+ )
+}
+
+export default ModalFocusAfterClose;
+reactstrap - Navbar
+ Navbar import React, { useState } from 'react';
+import {
+ Collapse,
+ Navbar,
+ NavbarToggler,
+ NavbarBrand,
+ Nav,
+ NavItem,
+ NavLink,
+ UncontrolledDropdown,
+ DropdownToggle,
+ DropdownMenu,
+ DropdownItem,
+ NavbarText
+} from 'reactstrap';
+
+const Example = (props) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen(!isOpen);
+
+ return (
+ <div>
+ <Navbar color="light" light expand="md">
+ <NavbarBrand href="/">reactstrap</NavbarBrand>
+ <NavbarToggler onClick={toggle} />
+ <Collapse isOpen={isOpen} navbar>
+ <Nav className="mr-auto" navbar>
+ <NavItem>
+ <NavLink href="/components/">Components</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
+ </NavItem>
+ <UncontrolledDropdown nav inNavbar>
+ <DropdownToggle nav caret>
+ Options
+ </DropdownToggle>
+ <DropdownMenu right>
+ <DropdownItem>
+ Option 1
+ </DropdownItem>
+ <DropdownItem>
+ Option 2
+ </DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>
+ Reset
+ </DropdownItem>
+ </DropdownMenu>
+ </UncontrolledDropdown>
+ </Nav>
+ <NavbarText>Simple Text</NavbarText>
+ </Collapse>
+ </Navbar>
+ </div>
+ );
+}
+
+export default Example;
+Navbar Properties See also Navs for additional components and PropTypes.
Navbar.propTypes = {
+ light: PropTypes.bool,
+ dark: PropTypes.bool,
+ fixed: PropTypes.string,
+ color: PropTypes.string,
+ role: PropTypes.string,
+ expand: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+ // pass in custom element to use
+}NavbarBrand Properties NavbarBrand.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+ // pass in custom element to use
+}NavbarText Properties NavbarText.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+ // pass in custom element to use
+}NavbarToggler Place the NavbarToggler after NavbarBrand to have it appear on the right (typical setup). Reverse the order to have it appear on the left
import React, { useState } from 'react';
+import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
+
+const Example = (props) => {
+ const [collapsed, setCollapsed] = useState(true);
+
+ const toggleNavbar = () => setCollapsed(!collapsed);
+
+ return (
+ <div>
+ <Navbar color="faded" light>
+ <NavbarBrand href="/" className="mr-auto">reactstrap</NavbarBrand>
+ <NavbarToggler onClick={toggleNavbar} className="mr-2" />
+ <Collapse isOpen={!collapsed} navbar>
+ <Nav navbar>
+ <NavItem>
+ <NavLink href="/components/">Components</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
+ </NavItem>
+ </Nav>
+ </Collapse>
+ </Navbar>
+ </div>
+ );
+}
+
+export default Example;
+NavbarToggler Properties NavbarToggler.propTypes = {
+ type: PropTypes.string,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+ // pass in custom element to use
+}reactstrap - Nav
+ Nav import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <p>List Based</p>
+ <Nav>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Another Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink disabled href="#">Disabled Link</NavLink>
+ </NavItem>
+ </Nav>
+ <hr />
+ <p>Link Based</p>
+ <Nav>
+ <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+ </Nav>
+ </div>
+ );
+}
+
+export default Example;
+Nav Properties Nav.propTypes = {
+ tabs: PropTypes.bool,
+ pills: PropTypes.bool,
+ card: PropTypes.bool,
+ justified: PropTypes.bool,
+ fill: PropTypes.bool,
+ vertical: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+ horizontal: PropTypes.string,
+ navbar: PropTypes.bool,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+ // pass in custom element to use
+}NavItem Properties NavItem.propTypes = {
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ active: PropTypes.bool,
+ // pass in custom element to use
+}NavLink Properties NavLink.propTypes = {
+ disabled: PropTypes.bool,
+ active: PropTypes.bool,
+ // pass in custom element to use
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ // ref will only get you a reference to the NavLink component, use innerRef to get a reference to the DOM element (for things like focus management).
+ innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
+}Vertical import React from 'react';
+import { Nav, NavItem, NavLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <p>List Based</p>
+ <Nav vertical>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Another Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink disabled href="#">Disabled Link</NavLink>
+ </NavItem>
+ </Nav>
+ <hr />
+ <p>Link based</p>
+ <Nav vertical>
+ <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
+ </Nav>
+ </div>
+ );
+}
+
+export default Example;
+Tabs import React, { useState } from 'react';
+import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(!dropdownOpen);
+
+ return (
+ <div>
+ <Nav tabs>
+ <NavItem>
+ <NavLink href="#" active>Link</NavLink>
+ </NavItem>
+ <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle nav caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Another Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink disabled href="#">Disabled Link</NavLink>
+ </NavItem>
+ </Nav>
+ </div>
+ );
+}
+
+export default Example;
+Pills import React, { useState } from 'react';
+import { Nav, NavItem, Dropdown, DropdownItem, DropdownToggle, DropdownMenu, NavLink } from 'reactstrap';
+
+const Example = (props) => {
+ const [dropdownOpen, setDropdownOpen] = useState(false);
+
+ const toggle = () => setDropdownOpen(!dropdownOpen);
+
+ return (
+ <div>
+ <Nav pills>
+ <NavItem>
+ <NavLink href="#" active>Link</NavLink>
+ </NavItem>
+ <Dropdown nav isOpen={dropdownOpen} toggle={toggle}>
+ <DropdownToggle nav caret>
+ Dropdown
+ </DropdownToggle>
+ <DropdownMenu>
+ <DropdownItem header>Header</DropdownItem>
+ <DropdownItem disabled>Action</DropdownItem>
+ <DropdownItem>Another Action</DropdownItem>
+ <DropdownItem divider />
+ <DropdownItem>Another Action</DropdownItem>
+ </DropdownMenu>
+ </Dropdown>
+ <NavItem>
+ <NavLink href="#">Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink href="#">Another Link</NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink disabled href="#">Disabled Link</NavLink>
+ </NavItem>
+ </Nav>
+ </div>
+ );
+}
+
+export default Example;
+reactstrap - Pagination
+ Pagination
import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Pagination aria-label="Page navigation example">
+ <PaginationItem>
+ <PaginationLink first href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink previous href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 1
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 2
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 3
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 4
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 5
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink next href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink last href="#" />
+ </PaginationItem>
+ </Pagination>
+ );
+}
+
+export default Example;
+Properties Pagination.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ listClassName: PropTypes.string,
+ cssModule: PropTypes.object,
+ size: PropTypes.string,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ listTag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ 'aria-label': PropTypes.string
+};
+
+PaginationItem.propTypes = {
+ active: PropTypes.bool,
+ children: PropTypes.node,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ disabled: PropTypes.bool,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+};
+
+PaginationLink.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ next: PropTypes.bool,
+ previous: PropTypes.bool,
+ first: PropTypes.bool,
+ last: PropTypes.bool,
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ 'aria-label': PropTypes.string
+};
+Disabled and active states
import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Pagination aria-label="Page navigation example">
+ <PaginationItem disabled>
+ <PaginationLink first href="#" />
+ </PaginationItem>
+ <PaginationItem disabled>
+ <PaginationLink previous href="#" />
+ </PaginationItem>
+ <PaginationItem active>
+ <PaginationLink href="#">
+ 1
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 2
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 3
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 4
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 5
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink next href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink last href="#" />
+ </PaginationItem>
+ </Pagination>
+ );
+}
+
+export default Example;
+Sizing
import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Pagination size="lg" aria-label="Page navigation example">
+ <PaginationItem>
+ <PaginationLink first href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink previous href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 1
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 2
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 3
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink next href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink last href="#" />
+ </PaginationItem>
+ </Pagination>
+ );
+}
+
+export default Example;
+
import React from 'react';
+import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Pagination size="sm" aria-label="Page navigation example">
+ <PaginationItem>
+ <PaginationLink first href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink previous href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 1
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 2
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink href="#">
+ 3
+ </PaginationLink>
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink next href="#" />
+ </PaginationItem>
+ <PaginationItem>
+ <PaginationLink last href="#" />
+ </PaginationItem>
+ </Pagination>
+ );
+}
+
+export default Example;
+reactstrap - Popovers
+ Popovers Popovers are built with https://popper.js.org/ via https://github.com/popperjs/react-popper .
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React, { useState } from 'react';
+import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
+
+const Example = (props) => {
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const toggle = () => setPopoverOpen(!popoverOpen);
+
+ return (
+ <div>
+ <Button id="Popover1" type="button">
+ Launch Popover
+ </Button>
+ <Popover placement="bottom" isOpen={popoverOpen} target="Popover1" toggle={toggle}>
+ <PopoverHeader>Popover Title</PopoverHeader>
+ <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+ </Popover>
+ </div>
+ );
+}
+
+export default Example;
+Properties Popover.propTypes = {
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+ // space separated list of triggers (e.g. "click hover focus")
+ trigger: PropTypes.string,
+ // boolean to control the state of the popover
+ isOpen: PropTypes.bool,
+ // callback for toggling isOpen in the controlling component
+ toggle: PropTypes.func,
+ // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+ boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
+ target: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
+ ]).isRequired,
+ // Where to inject the popper DOM node, default to body
+ container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
+ className: PropTypes.string,
+ // Apply class to the popper component
+ popperClassName: PropTypes.string,
+ // Apply class to the inner-popover
+ innerClassName: PropTypes.string,
+ disabled: PropTypes.bool,
+ hideArrow: PropTypes.bool,
+ placementPrefix: PropTypes.string,
+ delay: PropTypes.oneOfType([
+ PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+ PropTypes.number,
+ ]),
+ placement: PropTypes.oneOf([
+ 'auto',
+ 'auto-start',
+ 'auto-end',
+ 'top',
+ 'top-start',
+ 'top-end',
+ 'right',
+ 'right-start',
+ 'right-end',
+ 'bottom',
+ 'bottom-start',
+ 'bottom-end',
+ 'left',
+ 'left-start',
+ 'left-end',
+ ]),
+ // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
+ modifiers: PropTypes.object,
+ // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and
+ // will make the tooltip itself have "position: fixed" as well
+ positionFixed: PropTypes.bool,
+ offset: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number
+ ]),
+
+ // Whether to show/hide the popover with a fade effect
+ // (default: true)
+ fade: PropTypes.bool,
+
+ // Whether to flip the direction of the popover if too close to
+ // the container edge
+ // (default: true)
+ flip: PropTypes.bool,
+}Popovers Trigger Trigger each popover to see information about the trigger
Launch Popover (Focus) Launch Popover (Click) Launch Popover (Legacy)
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { Button, UncontrolledPopover, PopoverHeader, PopoverBody } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Button id="PopoverFocus" type="button">
+ Launch Popover (Focus)
+ </Button>
+ {' '}
+ <Button id="PopoverClick" type="button">
+ Launch Popover (Click)
+ </Button>
+ {' '}
+ <Button id="PopoverLegacy" type="button">
+ Launch Popover (Legacy)
+ </Button>
+ <UncontrolledPopover trigger="focus" placement="bottom" target="PopoverFocus">
+ <PopoverHeader>Focus Trigger</PopoverHeader>
+ <PopoverBody>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.</PopoverBody>
+ </UncontrolledPopover>
+ <UncontrolledPopover trigger="click" placement="bottom" target="PopoverClick">
+ <PopoverHeader>Click Trigger</PopoverHeader>
+ <PopoverBody>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.</PopoverBody>
+ </UncontrolledPopover>
+ <UncontrolledPopover trigger="legacy" placement="bottom" target="PopoverLegacy">
+ <PopoverHeader>Legacy Trigger</PopoverHeader>
+ <PopoverBody>
+ 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.</PopoverBody>
+ </UncontrolledPopover>
+ </div>
+ );
+}
+
+export default Example;
+Popovers Placements Top Bottom Left Right
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from "react";
+import { Button, Popover, PopoverHeader, PopoverBody } from "reactstrap";
+
+const PopoverItem = props => {
+ const { id, item } = props;
+ const [popoverOpen, setPopoverOpen] = useState(false);
+
+ const toggle = () => setPopoverOpen(!popoverOpen);
+
+ return (
+ <span>
+ <Button
+ className="mr-1"
+ color="secondary"
+ id={"Popover-" + id}
+ type="button"
+ >
+ {item.text}
+ </Button>
+ <Popover
+ placement={item.placement}
+ isOpen={popoverOpen}
+ target={"Popover-" + id}
+ toggle={toggle}
+ >
+ <PopoverHeader>Popover Title</PopoverHeader>
+ <PopoverBody>
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam.
+ Pellentesque ornare sem lacinia quam venenatis vestibulum.
+ </PopoverBody>
+ </Popover>
+ </span>
+ );
+};
+
+const PopoverExampleMulti = props => {
+ return (
+ <>
+ {[
+ {
+ placement: "top",
+ text: "Top"
+ },
+ {
+ placement: "bottom",
+ text: "Bottom"
+ },
+ {
+ placement: "left",
+ text: "Left"
+ },
+ {
+ placement: "right",
+ text: "Right"
+ }
+ ].map((popover, i) => {
+ return <PopoverItem key={i} item={popover} id={i} />;
+ })}
+ </>
+ );
+};
+
+export default PopoverExampleMulti;
+UncontrolledPopovers /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { Button, UncontrolledPopover, PopoverHeader, PopoverBody } from 'reactstrap';
+
+export default function () {
+ return (
+ <div>
+ <Button id="UncontrolledPopover" type="button">
+ Launch Popover
+ </Button>
+ <UncontrolledPopover placement="bottom" target="UncontrolledPopover">
+ <PopoverHeader>Popover Title</PopoverHeader>
+ <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
+ </UncontrolledPopover>
+ </div>
+ );
+}
+Repositioning Popovers If you need to reposition a popover due to content changes or target placement changes, use the scheduleUpdate function to manually reposition it. This function is exposed as a render prop for children.
import React, { useState } from 'react';
+import { Button, UncontrolledPopover, PopoverHeader, PopoverBody, Collapse } from 'reactstrap';
+
+const PopoverContent = ({ scheduleUpdate }) => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ return (
+ <>
+ <PopoverHeader>Schedule Update</PopoverHeader>
+ <PopoverBody>
+ <Button onClick={() => setIsOpen(!isOpen)}>Click me</Button>
+ <Collapse isOpen={isOpen} onEntered={scheduleUpdate} onExited={scheduleUpdate}>
+ 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.
+ </Collapse>
+ </PopoverBody>
+ </>
+ );
+}
+
+const Example = (props) => {
+ return (
+ <div className="text-center">
+ <Button id="ScheduleUpdateButton" type="button">
+ Open Popover
+ </Button>
+ <UncontrolledPopover trigger="click" placement="top" target="ScheduleUpdateButton">
+ {({ scheduleUpdate }) => (
+ <PopoverContent scheduleUpdate={scheduleUpdate} />
+ )}
+ </UncontrolledPopover>
+ </div>
+ );
+}
+
+export default Example;reactstrap - Progress
+ Progress 0%
25%
50%
75%
100%
Multiple bars
import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <div className="text-center">0%</div>
+ <Progress />
+ <div className="text-center">25%</div>
+ <Progress value="25" />
+ <div className="text-center">50%</div>
+ <Progress value={50} />
+ <div className="text-center">75%</div>
+ <Progress value={75} />
+ <div className="text-center">100%</div>
+ <Progress value="100" />
+ <div className="text-center">Multiple bars</div>
+ <Progress multi>
+ <Progress bar value="15" />
+ <Progress bar color="success" value="30" />
+ <Progress bar color="info" value="25" />
+ <Progress bar color="warning" value="20" />
+ <Progress bar color="danger" value="5" />
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+Properties Progress.propTypes = {
+ multi: PropTypes.bool,
+ bar: PropTypes.bool, // used in combination with multi
+ tag: PropTypes.string,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ ]),
+ min: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ ]),
+ max: PropTypes.oneOf([
+ PropTypes.string,
+ PropTypes.number,
+ ]),
+ animated: PropTypes.bool,
+ striped: PropTypes.bool,
+ color: PropTypes.string,
+ className: PropTypes.string,
+ barStyle: PropTypes.object, // used to add style to the inner progress-bar element
+ barClassName: PropTypes.string, // used to add class to the inner progress-bar element
+ barAriaValueText: PropTypes.string,
+ barAriaLabelledBy: PropTypes.string,
+};
+
+Progress.defaultProps = {
+ tag: 'progress',
+ value: 0,
+ max: 100,
+};Color Variants import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Progress value={2 * 5} />
+ <Progress color="success" value="25" />
+ <Progress color="info" value={50} />
+ <Progress color="warning" value={75} />
+ <Progress color="danger" value="100" />
+ </div>
+ );
+};
+
+export default Example;
+Labels import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Progress value="25">25%</Progress>
+ <Progress value={50}>1/2</Progress>
+ <Progress value={75}>You're almost there!</Progress>
+ <Progress color="success" value="100">You did it!</Progress>
+ <Progress multi>
+ <Progress bar value="15">Meh</Progress>
+ <Progress bar color="success" value="30">Wow!</Progress>
+ <Progress bar color="info" value="25">Cool</Progress>
+ <Progress bar color="warning" value="20">20%</Progress>
+ <Progress bar color="danger" value="5">!!</Progress>
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+Striped import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Progress striped value={2 * 5} />
+ <Progress striped color="success" value="25" />
+ <Progress striped color="info" value={50} />
+ <Progress striped color="warning" value={75} />
+ <Progress striped color="danger" value="100" />
+ <Progress multi>
+ <Progress striped bar value="10" />
+ <Progress striped bar color="success" value="30" />
+ <Progress striped bar color="warning" value="20" />
+ <Progress striped bar color="danger" value="20" />
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+Animated The animated prop also adds the striped prop; there is no need to pass both.
import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Progress animated value={2 * 5} />
+ <Progress animated color="success" value="25" />
+ <Progress animated color="info" value={50} />
+ <Progress animated color="warning" value={75} />
+ <Progress animated color="danger" value="100" />
+ <Progress multi>
+ <Progress animated bar value="10" />
+ <Progress animated bar color="success" value="30" />
+ <Progress animated bar color="warning" value="20" />
+ <Progress animated bar color="danger" value="20" />
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+Multiple bars / Stacked Plain
With Labels
Stripes and Animations
Stripes
Animated Stripes
Plain
import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <div className="text-center">Plain</div>
+ <Progress multi>
+ <Progress bar value="15" />
+ <Progress bar color="success" value="20" />
+ <Progress bar color="info" value="25" />
+ <Progress bar color="warning" value="20" />
+ <Progress bar color="danger" value="15" />
+ </Progress>
+ <div className="text-center">With Labels</div>
+ <Progress multi>
+ <Progress bar value="15">Meh</Progress>
+ <Progress bar color="success" value="35">Wow!</Progress>
+ <Progress bar color="warning" value="25">25%</Progress>
+ <Progress bar color="danger" value="25">LOOK OUT!!</Progress>
+ </Progress>
+ <div className="text-center">Stripes and Animations</div>
+ <Progress multi>
+ <Progress bar striped value="15">Stripes</Progress>
+ <Progress bar animated color="success" value="30">Animated Stripes</Progress>
+ <Progress bar color="info" value="25">Plain</Progress>
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+Max value 1 of 5
50 of 135
75 of 111
463 of 500
Various (40) of 55
import React from 'react';
+import { Progress } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <div className="text-center">1 of 5</div>
+ <Progress value="1" max="5" />
+ <div className="text-center">50 of 135</div>
+ <Progress value={50} max="135" />
+ <div className="text-center">75 of 111</div>
+ <Progress value={75} max={111} />
+ <div className="text-center">463 of 500</div>
+ <Progress value="463" max={500} />
+
+ <div className="text-center">Various (40) of 55</div>
+ <Progress multi>
+ <Progress bar value="5" max={55}>5</Progress>
+ <Progress bar color="success" value="15" max={55}>15</Progress>
+ <Progress bar color="warning" value="10" max={55}>10</Progress>
+ <Progress bar color="danger" value="10" max={55}>10</Progress>
+ </Progress>
+ </div>
+ );
+};
+
+export default Example;
+reactstrap - Spinners
+ Spinners Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Spinner color="primary" />
+ <Spinner color="secondary" />
+ <Spinner color="success" />
+ <Spinner color="danger" />
+ <Spinner color="warning" />
+ <Spinner color="info" />
+ <Spinner color="light" />
+ <Spinner color="dark" />
+ </div>
+ );
+}
+
+export default Example;
+Properties Spinner.propTypes = {
+ type: PropTypes.string, // default: 'border'
+ size: PropTypes.string,
+ color: PropTypes.string,
+ className: PropTypes.string,
+ cssModule: PropTypes.object,
+ children: PropTypes.string, // default: 'Loading...'
+};
+Growing Spinner Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
import React from 'react';
+import { Spinner } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Spinner type="grow" color="primary" />
+ <Spinner type="grow" color="secondary" />
+ <Spinner type="grow" color="success" />
+ <Spinner type="grow" color="danger" />
+ <Spinner type="grow" color="warning" />
+ <Spinner type="grow" color="info" />
+ <Spinner type="grow" color="light" />
+ <Spinner type="grow" color="dark" />
+ </div>
+ );
+}
+
+export default Example;
+Sizes <Spinner size="sm" color="primary" />{' '}
+<Spinner size="sm" color="secondary" /><Spinner style={{ width: '3rem', height: '3rem' }} />{' '}
+<Spinner style={{ width: '3rem', height: '3rem' }} type="grow" />reactstrap - Tables
+ Tables # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Properties Table.propTypes = {
+// Pass in a Component to override default element
+tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+size: PropTypes.string,
+bordered: PropTypes.bool,
+borderless: PropTypes.bool,
+striped: PropTypes.bool,
+dark: PropTypes.bool,
+hover: PropTypes.bool,
+responsive: PropTypes.bool,
+// Custom ref handler that will be assigned to the "ref" of the inner <table> element
+innerRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.string,
+ PropTypes.object
+])
+};Dark table # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table dark>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Striped rows # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table striped>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Bordered table # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table bordered>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Borderless table # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table borderless>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Hoverable rows # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table hover>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Small table # First Name Last Name Username 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table size="sm">
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>First Name</th>
+ <th>Last Name</th>
+ <th>Username</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Mark</td>
+ <td>Otto</td>
+ <td>@mdo</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Jacob</td>
+ <td>Thornton</td>
+ <td>@fat</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Larry</td>
+ <td>the Bird</td>
+ <td>@twitter</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+Responsive table # 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
import React from 'react';
+import { Table } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <Table responsive>
+ <thead>
+ <tr>
+ <th>#</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ <th>Table heading</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <th scope="row">1</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">2</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ <tr>
+ <th scope="row">3</th>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ <td>Table cell</td>
+ </tr>
+ </tbody>
+ </Table>
+ );
+}
+
+export default Example;
+reactstrap - Tabs
+ Tabs 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 import React, { useState } from 'react';
+import { TabContent, TabPane, Nav, NavItem, NavLink, Card, Button, CardTitle, CardText, Row, Col } from 'reactstrap';
+import classnames from 'classnames';
+
+const Example = (props) => {
+ const [activeTab, setActiveTab] = useState('1');
+
+ const toggle = tab => {
+ if(activeTab !== tab) setActiveTab(tab);
+ }
+
+ return (
+ <div>
+ <Nav tabs>
+ <NavItem>
+ <NavLink
+ className={classnames({ active: activeTab === '1' })}
+ onClick={() => { toggle('1'); }}
+ >
+ Tab1
+ </NavLink>
+ </NavItem>
+ <NavItem>
+ <NavLink
+ className={classnames({ active: activeTab === '2' })}
+ onClick={() => { toggle('2'); }}
+ >
+ More Tabs
+ </NavLink>
+ </NavItem>
+ </Nav>
+ <TabContent activeTab={activeTab}>
+ <TabPane tabId="1">
+ <Row>
+ <Col sm="12">
+ <h4>Tab 1 Contents</h4>
+ </Col>
+ </Row>
+ </TabPane>
+ <TabPane tabId="2">
+ <Row>
+ <Col sm="6">
+ <Card body>
+ <CardTitle>Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ </Col>
+ <Col sm="6">
+ <Card body>
+ <CardTitle>Special Title Treatment</CardTitle>
+ <CardText>With supporting text below as a natural lead-in to additional content.</CardText>
+ <Button>Go somewhere</Button>
+ </Card>
+ </Col>
+ </Row>
+ </TabPane>
+ </TabContent>
+ </div>
+ );
+}
+
+export default Example;
+reactstrap - Toasts
+ Toasts This is a toast on a white background — check it out!
This is a toast on a gridded background — check it out!
This is a toast on a primary background — check it out!
This is a toast on a secondary background — check it out!
This is a toast on a success background — check it out!
This is a toast on a danger background — check it out!
This is a toast on a warning background — check it out!
This is a toast on an info background — check it out!
This is a toast on a dark background — check it out!
This is a toast on a black background — check it out!
import React from 'react';
+import { Toast, ToastBody, ToastHeader } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <div className="p-3 my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a white background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 my-2 rounded bg-docs-transparent-grid">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a gridded background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-primary my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a primary background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-secondary my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a secondary background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-success my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a success background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-danger my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a danger background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-warning my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a warning background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-info my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on an info background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 bg-dark my-2 rounded">
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a dark background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ <div className="p-3 my-2 rounded" style={{ background: 'black' }}>
+ <Toast>
+ <ToastHeader>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast on a black background — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ </div>
+ );
+};
+
+export default Example;
+Properties Toast.propTypes = {
+ className: PropTypes.string,
+ color: PropTypes.string, // default: 'success'
+ isOpen: PropTypes.bool, // default: true
+ tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+ // Controls the transition of the toast fading in and out
+ // See [Fade](/components/fade/) for more details
+ transition: PropTypes.shape(Fade.propTypes),
+}This is a toast with a primary icon — check it out!
This is a toast with a secondary icon — check it out!
This is a toast with a success icon — check it out!
This is a toast with a danger icon — check it out!
This is a toast with a warning icon — check it out!
This is a toast with an info icon — check it out!
This is a toast with a light icon — check it out!
This is a toast with a dark icon — check it out!
This is a toast with a custom icon — check it out!
import React from 'react';
+import { Toast, ToastBody, ToastHeader, Spinner } from 'reactstrap';
+
+const Example = (props) => {
+ return (
+ <div>
+ <Toast>
+ <ToastHeader icon="primary">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a primary icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="secondary">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a secondary icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="success">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a success icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="danger">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a danger icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="warning">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a warning icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="info">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with an info icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="light">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a light icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon="dark">
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a dark icon — check it out!
+ </ToastBody>
+ </Toast>
+ <Toast>
+ <ToastHeader icon={<Spinner size="sm" />}>
+ Reactstrap
+ </ToastHeader>
+ <ToastBody>
+ This is a toast with a custom icon — check it out!
+ </ToastBody>
+ </Toast>
+ </div>
+ );
+};
+
+export default Example;
+Dismissing /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from 'react';
+import { Button, Toast, ToastBody, ToastHeader } from 'reactstrap';
+
+const ToastDismissExample = (props) => {
+ const { buttonLabel } = props;
+ const [show, setShow] = useState(false);
+
+ const toggle = () => setShow(!show);
+
+ return (
+ <div>
+ <Button color="primary" onClick={toggle}>{buttonLabel}</Button>
+ <br />
+ <br />
+ <Toast isOpen={show}>
+ <ToastHeader toggle={toggle}>Toast title</ToastHeader>
+ <ToastBody>
+ 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.
+ </ToastBody>
+ </Toast>
+ </div>
+ );
+}
+
+export default ToastDismissExample;
+reactstrap - Tooltips
+ Tooltips Tooltips are built with https://popper.js.org/ via https://github.com/popperjs/react-popper .
Somewhere in here is a tooltip .
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React, { useState } from 'react';
+import { Tooltip } from 'reactstrap';
+
+const Example = (props) => {
+ const [tooltipOpen, setTooltipOpen] = useState(false);
+
+ const toggle = () => setTooltipOpen(!tooltipOpen);
+
+ return (
+ <div>
+ <p>Somewhere in here is a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="TooltipExample">tooltip</span>.</p>
+ <Tooltip placement="right" isOpen={tooltipOpen} target="TooltipExample" toggle={toggle}>
+ Hello world!
+ </Tooltip>
+ </div>
+ );
+}
+
+export default Example;
+Properties Tooltip.propTypes = {
+ children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+ // space separated list of triggers (e.g. "click hover focus")
+ trigger: PropTypes.string,
+ // boundaries for popper, can be scrollParent, window, viewport, or any DOM element
+ boundariesElement: PropTypes.oneOfType([PropTypes.string, DOMElement]),
+ // boolean to control the state of the tooltip
+ isOpen: PropTypes.bool,
+ hideArrow: PropTypes.bool,
+ // callback for toggling isOpen in the controlling component. It will receive an object with info about the event that triggered it
+ toggle: PropTypes.func,
+ // target element or element ID, popover is attached to this element
+ target: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.func,
+ DOMElement, // instanceof Element (https://developer.mozilla.org/en-US/docs/Web/API/Element)
+ ]).isRequired,
+ // Where to inject the popper DOM node, default to body
+ container: PropTypes.oneOfType([PropTypes.string, PropTypes.func, DOMElement]),
+ // optionally override show/hide delays - default { show: 0, hide: 50 }
+ delay: PropTypes.oneOfType([
+ PropTypes.shape({ show: PropTypes.number, hide: PropTypes.number }),
+ PropTypes.number
+ ]),
+ className: PropTypes.string,
+ // Apply class to the popper component
+ popperClassName: PropTypes.string,
+ // Apply class to the inner-tooltip
+ innerClassName: PropTypes.string,
+ // Apply class to the arrow-tooltip ('arrow' by default)
+ arrowClassName: PropTypes.string,
+ // optionally hide tooltip when hovering over tooltip content - default true
+ autohide: PropTypes.bool,
+ // convenience attachments for popover
+ placement: PropTypes.oneOf([
+ 'auto',
+ 'auto-start',
+ 'auto-end',
+ 'top',
+ 'top-start',
+ 'top-end',
+ 'right',
+ 'right-start',
+ 'right-end',
+ 'bottom',
+ 'bottom-start',
+ 'bottom-end',
+ 'left',
+ 'left-start',
+ 'left-end',
+ ]),
+ // Custom modifiers that are passed to Popper.js, see https://popper.js.org/popper-documentation.html#modifiers
+ modifiers: PropTypes.object,
+ // Whether the element the tooltip is pointing to has "position: fixed" styling. This is passed to Popper.js and
+ // will make the tooltip itself have "position: fixed" as well
+ positionFixed: PropTypes.bool,
+ offset: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number
+ ]),
+ // Custom ref handler that will be assigned to the "ref" of the <div> wrapping the tooltip elements
+ innerRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.string,
+ PropTypes.object
+ ]),
+
+ // Whether to show/hide the popover with a fade effect
+ // (default: true)
+ fade: PropTypes.bool,
+
+ // Whether to flip the direction of the popover if too close to
+ // the container edge
+ // (default: true)
+ flip: PropTypes.bool,
+}Sometimes you need to allow users to select text within a tooltip .
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React, { useState } from 'react';
+import { Tooltip } from 'reactstrap';
+
+const Example = (props) => {
+ const [tooltipOpen, setTooltipOpen] = useState(false);
+
+ const toggle = () => setTooltipOpen(!tooltipOpen);
+
+ return (
+ <div>
+ <p>Sometimes you need to allow users to select text within a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="DisabledAutoHideExample">tooltip</span>.</p>
+ <Tooltip placement="top" isOpen={tooltipOpen} autohide={false} target="DisabledAutoHideExample" toggle={toggle}>
+ Try to select this text!
+ </Tooltip>
+ </div>
+ );
+}
+
+export default Example;
+Top Bottom Left Right
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+
+import React, { useState } from "react";
+import { Button, Tooltip } from "reactstrap";
+
+const TooltipItem = props => {
+ const { item, id } = props;
+ const [tooltipOpen, setTooltipOpen] = useState(false);
+
+ const toggle = () => setTooltipOpen(!tooltipOpen);
+
+ return (
+ <span>
+ <Button className="mr-1" color="secondary" id={"Tooltip-" + id}>
+ {item.text}
+ </Button>
+ <Tooltip
+ placement={item.placement}
+ isOpen={tooltipOpen}
+ target={"Tooltip-" + id}
+ toggle={toggle}
+ >
+ Tooltip Content!
+ </Tooltip>
+ </span>
+ );
+};
+
+const TooltipExampleMulti = props => {
+ return (
+ <>
+ {[
+ {
+ placement: "top",
+ text: "Top"
+ },
+ {
+ placement: "bottom",
+ text: "Bottom"
+ },
+ {
+ placement: "left",
+ text: "Left"
+ },
+ {
+ placement: "right",
+ text: "Right"
+ }
+ ].map((tooltip, i) => {
+ return <TooltipItem key={i} item={tooltip} id={i} />;
+ })}
+ </>
+ );
+};
+
+export default TooltipExampleMulti;
+For the most basic use-case an uncontrolled component can provide the functionality wanted without the need to manage/control the state of the component. UncontrolledTooltip does not require isOpen nor toggle props to work.
Somewhere in here is a tooltip .
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { UncontrolledTooltip } from 'reactstrap';
+
+export default function Example() {
+ return (
+ <div>
+ <p>Somewhere in here is a <span style={{textDecoration: "underline", color:"blue"}} href="#" id="UncontrolledTooltipExample">tooltip</span>.</p>
+ <UncontrolledTooltip placement="right" target="UncontrolledTooltipExample">
+ Hello world!
+ </UncontrolledTooltip>
+ </div>
+ );
+}
+If you need to reposition a tooltip due to content changes or target placement changes, use the scheduleUpdate function to manually reposition it. This function is exposed as a render prop for children.
import React, { useState, useEffect } from 'react';
+import { Button, UncontrolledTooltip } from 'reactstrap';
+
+const shortText = 'Hi';
+const longText = 'Long tooltip content to test scheduleUpdate';
+
+const TooltipContent = ({ scheduleUpdate }) => {
+ const [text, setText] = useState(shortText);
+
+ useEffect(() => {
+ const intervalId = setInterval(() => {
+ setText(text === shortText ? longText : shortText);
+ scheduleUpdate();
+ }, 2000);
+
+ return () => clearInterval(intervalId);
+ });
+
+ return (
+ <>{text}</>
+ );
+}
+
+const Example = () => {
+ return (
+ <div className="text-center">
+ <Button id="ScheduleUpdateTooltip">Click me</Button>
+ <UncontrolledTooltip placement="top" target="ScheduleUpdateTooltip" trigger="click">
+ {({ scheduleUpdate }) => (
+ <TooltipContent scheduleUpdate={scheduleUpdate} />
+ )}
+ </UncontrolledTooltip>
+ </div>
+ );
+}
+
+export default Example;reactstrap - React Bootstrap 4 components
+ Installation NPM Install reactstrap and peer dependencies via NPM
npm install --save reactstrap react react-domImport the components you need
Danger!
import React from 'react';
+import { Button } from 'reactstrap';
+
+export default (props) => {
+ return (
+ <Button color="danger">Danger!</Button>
+ );
+};
+Getting Started with Create React App Follow the Create React App instructions and then follow the Adding Bootstrap instructions .
tl;dr npx create-react-app my-app
+cd my-app
+npm startThen open http://localhost:3000/ to see your app. The initial structure of your app is setup. Next, let's add reactstrap and bootstrap.
Adding Bootstrap Install reactstrap and Bootstrap from NPM. Reactstrap does not include Bootstrap CSS so this needs to be installed as well:
npm install --save bootstrap
+npm install --save reactstrap react react-domImport Bootstrap CSS in the src/index.js file:
import 'bootstrap/dist/css/bootstrap.min.css';Import required reactstrap components within src/App.js file or your custom component files:
import { Button } from 'reactstrap';Now you are ready to use the imported reactstrap components within your component hierarchy defined in the render method. Here is an example App.js
CDN Reactstrap can be included directly in your application's bundle or excluded during compilation and linked directly to a CDN.
https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.jsNote : When using the external CDN library, be sure to include the required dependencies as necessary prior to the Reactstrap library:
Check out the demo here
About the Project This library contains React Bootstrap 4 components that favor composition and control. The library does not depend on jQuery or Bootstrap javascript. However, https://popper.js.org/ via https://github.com/popperjs/react-popper is relied upon for advanced positioning of content like Tooltips, Popovers, and auto-flipping Dropdowns.
There are a few core concepts to understand in order to make the most out of this library.
1) Your content is expected to be composed via props.children rather than using named props to pass in Components.
// Content passed in via props
+const Example = (props) => {
+ return (
+ <p>This is a tooltip <TooltipTrigger tooltip={TooltipContent}>example</TooltipTrigger>!</p>
+ );
+}
+
+// Content passed in as children (Preferred)
+const PreferredExample = (props) => {
+ return (
+ <p>
+ This is a <a href="#" id="TooltipExample">tooltip</a> example.
+ <Tooltip target="TooltipExample">
+ <TooltipContent/>
+ </Tooltip>
+ </p>
+ );
+}2) Attributes in this library are used to pass in state, conveniently apply modifier classes, enable advanced functionality (like popperjs), or automatically include non-content based elements.
Examples:
isOpen - current state for items like dropdown, popover, tooltiptoggle - callback for toggling isOpen in the controlling componentcolor - applies color classes, ex: <Button color="danger"/>size for controlling size classes. ex: <Button size="sm"/>tag - customize component output by passing in an element name or Componentboolean based props (attributes) when possible for alternative style classes or sr-only content reactstrap - React Bootstrap 4 components
+ UiFort Check out some examples that our partners from UiFort created using the Reactstrap components library.
More themes will be added soon !
Creative Tim Check out some examples that our partners from Creative Tim created using the Reactstrap components library.
WrapPixel Check out some examples that our partners from WrapPixel created using the Reactstrap components library.
More themes will be added soon !
PIXINVENT PIXINVENT provides high quality, creative design and easy to use Premium & Free Bootstrap Admin Template
More themes will be added soon !
MDBootstrap Check out some examples that our partners from MDBootstrap created using the Reactstrap components library.
More themes will be added soon !
reactstrap - Clearfix
+ Clearfix Easily clear floats by adding .clearfix to the parent element . Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.
...
Example Button floated left Example Button floated right
import React from 'react';
+
+const Example = () => {
+ return (
+ <div className="bg-info clearfix" style={{ padding: '.5rem' }}>
+ <button className="btn btn-secondary float-left">Example Button floated left</button>
+ <button className="btn btn-danger float-right">Example Button floated right</button>
+ </div>
+ );
+};
+
+export default Example;
+reactstrap - Colors
+ Colors Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.
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.
import React from 'react';
+
+const Example = () => {
+ return (
+ <div>
+ <p className="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
+ <p className="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+ <p className="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
+ <p className="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+ <p className="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
+ <p className="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
+ <p className="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
+ </div>
+ );
+};
+
+export default Example;
+
![\"\"](\"/assets/logo.png\"){kind=logo}
\n 
![\"Card](\"/assets/318x180.svg\")
\n ![\\\"Card](\\\"/assets/318x180.svg\\\")
\\n