├── .eslintignore ├── .eslintrc.json ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ └── bug-report.md ├── dependabot.yml └── workflows │ ├── coverage.yml │ ├── docs.yml │ ├── release-please.yml │ └── test.yml ├── .gitignore ├── .nvmrc ├── .prettierrc.json ├── .storybook ├── main.cjs ├── manager-head.html ├── manager.cjs ├── preview-head.html ├── preview.cjs └── webpack.config.cjs ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── LICENSE ├── PULL_REQUEST_TEMPLATE.md ├── README.md ├── SECURITY.md ├── __mocks__ ├── .eslintrc └── react-popper.js ├── babel.build.config.cjs ├── babel.config.cjs ├── babel.esm.config.cjs ├── config-overrides ├── index.cjs └── package.json ├── jest.config.js ├── package.json ├── scripts ├── docs └── tag_release ├── src ├── Accordion.js ├── AccordionBody.js ├── AccordionContext.js ├── AccordionHeader.js ├── AccordionItem.js ├── Alert.js ├── Badge.js ├── Breadcrumb.js ├── BreadcrumbItem.js ├── Button.js ├── ButtonDropdown.js ├── ButtonGroup.js ├── ButtonToggle.js ├── ButtonToolbar.js ├── Card.js ├── CardBody.js ├── CardColumns.js ├── CardDeck.js ├── CardFooter.js ├── CardGroup.js ├── CardHeader.js ├── CardImg.js ├── CardImgOverlay.js ├── CardLink.js ├── CardSubtitle.js ├── CardText.js ├── CardTitle.js ├── Carousel.js ├── CarouselCaption.js ├── CarouselContext.js ├── CarouselControl.js ├── CarouselIndicators.js ├── CarouselItem.js ├── CloseButton.js ├── Col.js ├── Collapse.js ├── Container.js ├── Dropdown.js ├── DropdownContext.js ├── DropdownItem.js ├── DropdownMenu.js ├── DropdownToggle.js ├── Fade.js ├── Form.js ├── FormFeedback.js ├── FormGroup.js ├── FormText.js ├── Input.js ├── InputGroup.js ├── InputGroupContext.js ├── InputGroupText.js ├── Label.js ├── List.js ├── ListGroup.js ├── ListGroupItem.js ├── ListGroupItemHeading.js ├── ListGroupItemText.js ├── ListInlineItem.js ├── Media.js ├── Modal.js ├── ModalBody.js ├── ModalFooter.js ├── ModalHeader.js ├── Nav.js ├── NavItem.js ├── NavLink.js ├── Navbar.js ├── NavbarBrand.js ├── NavbarText.js ├── NavbarToggler.js ├── Offcanvas.js ├── OffcanvasBody.js ├── OffcanvasHeader.js ├── Pagination.js ├── PaginationItem.js ├── PaginationLink.js ├── Placeholder.js ├── PlaceholderButton.js ├── Popover.js ├── PopoverBody.js ├── PopoverHeader.js ├── PopperContent.js ├── PopperTargetHelper.js ├── Portal.js ├── Progress.js ├── Row.js ├── Spinner.js ├── TabContent.js ├── TabContext.js ├── TabPane.js ├── Table.js ├── Toast.js ├── ToastBody.js ├── ToastHeader.js ├── Tooltip.js ├── TooltipPopoverWrapper.js ├── UncontrolledAccordion.js ├── UncontrolledAlert.js ├── UncontrolledButtonDropdown.js ├── UncontrolledCarousel.js ├── UncontrolledCollapse.js ├── UncontrolledDropdown.js ├── UncontrolledPopover.js ├── UncontrolledTooltip.js ├── __tests__ │ ├── .eslintrc │ ├── Accordion.spec.js │ ├── AccordionBody.spec.js │ ├── AccordionHeader.spec.js │ ├── AccordionItem.spec.js │ ├── Alert.spec.js │ ├── Badge.spec.js │ ├── Breadcrumb.spec.js │ ├── BreadcrumbList.spec.js │ ├── Button.spec.js │ ├── ButtonDropdown.spec.js │ ├── ButtonGroup.spec.js │ ├── ButtonToggle.spec.js │ ├── ButtonToolbar.spec.js │ ├── Card.spec.js │ ├── CardBody.spec.js │ ├── CardColumns.spec.js │ ├── CardDeck.spec.js │ ├── CardFooter.spec.js │ ├── CardGroup.spec.js │ ├── CardHeader.spec.js │ ├── CardImg.spec.js │ ├── CardImgOverlay.spec.js │ ├── CardLink.spec.js │ ├── CardSubtitle.spec.js │ ├── CardText.spec.js │ ├── CardTitle.spec.js │ ├── Carousel.spec.js │ ├── CloseButton.spec.js │ ├── Col.spec.js │ ├── Collapse.spec.js │ ├── Container.spec.js │ ├── Dropdown.spec.js │ ├── DropdownItem.spec.js │ ├── DropdownMenu.spec.js │ ├── DropdownToggle.spec.js │ ├── Fade.spec.js │ ├── Form.spec.js │ ├── FormFeedback.spec.js │ ├── FormGroup.spec.js │ ├── FormText.spec.js │ ├── Input.spec.js │ ├── InputGroup.spec.js │ ├── InputGroupText.spec.js │ ├── Label.spec.js │ ├── List.spec.js │ ├── ListGroup.spec.js │ ├── ListGroupItem.spec.js │ ├── ListGroupItemHeading.spec.js │ ├── ListGroupItemText.spec.js │ ├── ListInlineItem.spec.js │ ├── Media.spec.js │ ├── Modal.spec.js │ ├── ModalBody.spec.js │ ├── ModalFooter.spec.js │ ├── ModalHeader.spec.js │ ├── Nav.spec.js │ ├── NavBrand.spec.js │ ├── NavItem.spec.js │ ├── NavLink.spec.js │ ├── Navbar.spec.js │ ├── NavbarText.spec.js │ ├── NavbarToggler.spec.js │ ├── Offcanvas.spec.js │ ├── OffcanvasBody.spec.js │ ├── OffcanvasHeader.spec.js │ ├── Pagination.spec.js │ ├── PaginationItem.spec.js │ ├── PaginationLink.spec.js │ ├── Placeholder.spec.js │ ├── PlaceholderButton.spec.js │ ├── Popover.spec.js │ ├── PopoverBody.spec.js │ ├── PopoverHeader.spec.js │ ├── PopperContent.spec.js │ ├── Progress.spec.js │ ├── Row.spec.js │ ├── Spinner.spec.js │ ├── Table.spec.js │ ├── Tabs.spec.js │ ├── Toast.spec.js │ ├── ToastBody.spec.js │ ├── ToastHeader.spec.js │ ├── Tooltip.spec.js │ ├── TooltipPopoverWrapper.spec.js │ ├── Uncontrolled.spec.js │ ├── UncontrolledAccordion.spec.js │ ├── UncontrolledCarousel.spec.js │ ├── UncontrolledCollapse.spec.js │ └── utils.spec.js ├── index.js ├── polyfill.js ├── setupTests.js ├── testUtils.js └── utils.js ├── static ├── logo-white.svg ├── logo.svg └── themes │ └── bamburgh-react-admin-dashboard-reactstrap-pro.jpg ├── stories ├── .eslintrc.json ├── Accordion.stories.js ├── Alert.stories.js ├── Badge.stories.js ├── Breadcrumb.stories.js ├── Button.stories.js ├── ButtonGroup.stories.js ├── Card.stories.js ├── Carousel.stories.js ├── CloseButton.stories.js ├── Collapse.stories.js ├── Dropdown.stories.js ├── Fade.stories.js ├── Forms.stories.js ├── GitHub.stories.mdx ├── Index.stories.mdx ├── InputGroup.stories.js ├── Layout.stories.js ├── List.stories.js ├── ListGroup.stories.js ├── Modal.stories.js ├── Nav.stories.js ├── Navbar.stories.js ├── Offcanvas.stories.js ├── Pagination.stories.js ├── Placeholder.stories.js ├── Popover.stories.js ├── Progress.stories.js ├── Spinner.stories.js ├── Table.stories.js ├── Toast.stories.js ├── Tooltip.stories.js ├── Upgrading.stories.mdx ├── examples │ ├── Accordion │ │ ├── Accordion.js │ │ ├── AccordionExample.js │ │ ├── AccordionFlush.js │ │ ├── AccordionFlushExample.js │ │ ├── AccordionProps.js │ │ ├── AccordionStayOpen.js │ │ ├── AccordionUncontrolled.js │ │ └── AccordionUncontrolledExample.js │ ├── Alert │ │ ├── Alert.js │ │ ├── Colors.js │ │ ├── Content.js │ │ ├── Dismiss.js │ │ ├── DismissExample.js │ │ ├── Fadeless.js │ │ ├── Link.js │ │ ├── Props.js │ │ └── UncontrolledDismiss.js │ ├── Badge │ │ ├── Badge.js │ │ ├── Button.js │ │ ├── Headings.js │ │ ├── Links.js │ │ ├── Pills.js │ │ ├── Props.js │ │ └── Variations.js │ ├── Breadcrump │ │ ├── Breadcrumb.js │ │ ├── NoList.js │ │ └── Props.js │ ├── Button │ │ ├── Button.js │ │ ├── Colors.js │ │ ├── Disabled.js │ │ ├── Outline.js │ │ ├── Props.js │ │ ├── Size.js │ │ └── Tags.js │ ├── ButtonDropdown.js │ ├── ButtonDropdownMulti.js │ ├── ButtonDropdownMultiSplit.js │ ├── ButtonDropdownUncontrolled.js │ ├── ButtonGroup │ │ ├── ButtonCloseIcon.js │ │ ├── ButtonGroup.js │ │ ├── MixedStyles.js │ │ ├── Nesting.js │ │ ├── Props.js │ │ ├── Sizing.js │ │ ├── Stateful.js │ │ ├── StatefulExample.js │ │ ├── Toolbar.js │ │ └── Vertical.js │ ├── Card │ │ ├── Alignment.js │ │ ├── Backgrounds.js │ │ ├── Body.js │ │ ├── Card.js │ │ ├── Columns.js │ │ ├── ContentTypes.js │ │ ├── Decks.js │ │ ├── Groups.js │ │ ├── HeaderFooter.js │ │ ├── ImageCaps.js │ │ ├── ImageOverlay.js │ │ ├── KitchenSInk.js │ │ ├── ListGroup.js │ │ ├── Outline.js │ │ ├── Props.js │ │ └── Sizing.js │ ├── Carousel │ │ ├── Carousel.js │ │ ├── CarouselExample.js │ │ ├── CustomTag.js │ │ ├── CustomTagExample.js │ │ ├── Props.js │ │ └── Uncontrolled.js │ ├── Clearfix.js │ ├── CloseButton │ │ ├── CloseButton.js │ │ ├── Disabled.js │ │ ├── Props.js │ │ └── White.js │ ├── Collapse │ │ ├── Collapse.js │ │ ├── CollapseExample.js │ │ ├── Events.js │ │ ├── EventsExample.js │ │ ├── Horizontal.js │ │ ├── Props.js │ │ └── Uncontrolled.js │ ├── Color.js │ ├── ContainerResponsive.js │ ├── Dropdown │ │ ├── Container.js │ │ ├── Custom.js │ │ ├── Dark.js │ │ ├── DirectionKitchen.js │ │ ├── Dropdown.js │ │ ├── DropdownExample.js │ │ ├── Props.js │ │ ├── SetActiveFromChild.js │ │ ├── Sizing.js │ │ ├── SizingExample.js │ │ ├── Split.js │ │ └── Uncontrolled.js │ ├── Fade.js │ ├── FadeProps.js │ ├── Form │ │ ├── Form.js │ │ ├── FormFeedback.js │ │ ├── FormGrid.js │ │ ├── FormGridFormRow.js │ │ ├── FormInline.js │ │ ├── FormProps.js │ │ ├── InlineCheckboxes.js │ │ ├── Input.js │ │ ├── InputGridSizing.js │ │ ├── InputSizing.js │ │ ├── InputType.js │ │ ├── LabelFloating.js │ │ ├── LabelHidden.js │ │ ├── Switches.js │ │ └── SwitchesExample.js │ ├── InputGroup │ │ ├── Addon.js │ │ ├── Button.js │ │ ├── ButtonShorthand.js │ │ ├── Overview.js │ │ ├── Props.js │ │ └── Sizing.js │ ├── Layout.js │ ├── LayoutProps.js │ ├── LayoutRowCols.js │ ├── List │ │ ├── Inline.js │ │ ├── List.js │ │ ├── Props.js │ │ └── Unstyled.js │ ├── ListGroup │ │ ├── Active.js │ │ ├── Badge.js │ │ ├── ContextualClasses.js │ │ ├── CustomContent.js │ │ ├── DisabledItems.js │ │ ├── Flush.js │ │ ├── Horizontal.js │ │ ├── LinksAndButtons.js │ │ ├── ListGroup.js │ │ ├── Numbered.js │ │ └── Props.js │ ├── Media.js │ ├── MediaAlignment.js │ ├── MediaList.js │ ├── MediaNested.js │ ├── Modal │ │ ├── Backdrop.js │ │ ├── BackdropExample.js │ │ ├── CustomCloseButton.js │ │ ├── CustomCloseButtonExample.js │ │ ├── CustomTimeout.js │ │ ├── CustomTimeoutExample.js │ │ ├── Destructuring.js │ │ ├── DestructuringExample.js │ │ ├── External.js │ │ ├── ExternalExample.js │ │ ├── Fadeless.js │ │ ├── FadelessExample.js │ │ ├── FocusAfterClose.js │ │ ├── FocusAfterCloseExample.js │ │ ├── Fullscreen.js │ │ ├── FullscreenExample.js │ │ ├── Modal.js │ │ ├── ModalExample.js │ │ ├── Nested.js │ │ ├── NestedExample.js │ │ └── Props.js │ ├── Nav │ │ ├── Fill.js │ │ ├── Justify.js │ │ ├── Navs.js │ │ ├── Pills.js │ │ ├── Props.js │ │ ├── TabPane.js │ │ ├── Tabs.js │ │ ├── TabsExample.js │ │ └── Vertical.js │ ├── Navbar │ │ ├── Brand.js │ │ ├── Navbar.js │ │ ├── NavbarExample.js │ │ ├── Props.js │ │ ├── Toggler.js │ │ └── TogglerExample.js │ ├── Offcanvas.js │ ├── OffcanvasProps.js │ ├── Pagination │ │ ├── Pagination.js │ │ ├── Props.js │ │ ├── SizingLarge.js │ │ ├── SizingSmall.js │ │ └── State.js │ ├── Placeholder │ │ ├── Animation.js │ │ ├── Color.js │ │ ├── Placeholder.js │ │ ├── Props.js │ │ └── Size.js │ ├── Popover │ │ ├── Focus.js │ │ ├── Multi.js │ │ ├── Popover.js │ │ ├── Props.js │ │ ├── Uncontrolled.js │ │ └── Update.js │ ├── Progress │ │ ├── Animated.js │ │ ├── Color.js │ │ ├── Height.js │ │ ├── Labels.js │ │ ├── Max.js │ │ ├── Multi.js │ │ ├── Progress.js │ │ ├── Props.js │ │ └── Striped.js │ ├── Props.js │ ├── Spinner │ │ ├── Alignment.js │ │ ├── Button.js │ │ ├── Colors.js │ │ ├── CustomSize.js │ │ ├── Grower.js │ │ ├── Props.js │ │ ├── Size.js │ │ └── Spinner.js │ ├── Table │ │ ├── Bordered.js │ │ ├── Borderless.js │ │ ├── Dark.js │ │ ├── Hover.js │ │ ├── Props.js │ │ ├── Responsive.js │ │ ├── Sizing.js │ │ ├── Striped.js │ │ ├── Table.js │ │ └── Variants.js │ ├── Toast.js │ ├── ToastDismiss.js │ ├── ToastHeaderIcon.js │ ├── ToastProps.js │ ├── Tooltip │ │ ├── AutoHide.js │ │ ├── AutoHideExample.js │ │ ├── Directions.js │ │ ├── DirectionsExample.js │ │ ├── Props.js │ │ ├── Tooltip.js │ │ ├── TooltipExample.js │ │ ├── Uncontrolled.js │ │ └── Update.js │ ├── UncontrolledAccordion.js │ └── options.js └── themes │ ├── Themes.stories.mdx │ └── index.js ├── types ├── index.d.ts ├── lib │ ├── Accordion.d.ts │ ├── AccordionBody.d.ts │ ├── AccordionHeader.d.ts │ ├── AccordionItem.d.ts │ ├── Alert.d.ts │ ├── Badge.d.ts │ ├── Breadcrumb.d.ts │ ├── BreadcrumbItem.d.ts │ ├── Button.d.ts │ ├── ButtonDropdown.d.ts │ ├── ButtonGroup.d.ts │ ├── ButtonToggle.d.ts │ ├── ButtonToolbar.d.ts │ ├── Card.d.ts │ ├── CardBody.d.ts │ ├── CardColumns.d.ts │ ├── CardDeck.d.ts │ ├── CardFooter.d.ts │ ├── CardGroup.d.ts │ ├── CardHeader.d.ts │ ├── CardImg.d.ts │ ├── CardImgOverlay.d.ts │ ├── CardLink.d.ts │ ├── CardSubtitle.d.ts │ ├── CardText.d.ts │ ├── CardTitle.d.ts │ ├── Carousel.d.ts │ ├── CarouselCaption.d.ts │ ├── CarouselControl.d.ts │ ├── CarouselIndicators.d.ts │ ├── CarouselItem.d.ts │ ├── CloseButton.d.ts │ ├── Col.d.ts │ ├── Collapse.d.ts │ ├── Container.d.ts │ ├── Dropdown.d.ts │ ├── DropdownItem.d.ts │ ├── DropdownMenu.d.ts │ ├── DropdownToggle.d.ts │ ├── Fade.d.ts │ ├── Form.d.ts │ ├── FormFeedback.d.ts │ ├── FormGroup.d.ts │ ├── FormText.d.ts │ ├── Input.d.ts │ ├── InputGroup.d.ts │ ├── InputGroupText.d.ts │ ├── Label.d.ts │ ├── List.d.ts │ ├── ListGroup.d.ts │ ├── ListGroupItem.d.ts │ ├── ListGroupItemHeading.d.ts │ ├── ListGroupItemText.d.ts │ ├── ListInlineItem.d.ts │ ├── Media.d.ts │ ├── Modal.d.ts │ ├── ModalBody.d.ts │ ├── ModalFooter.d.ts │ ├── ModalHeader.d.ts │ ├── Nav.d.ts │ ├── NavItem.d.ts │ ├── NavLink.d.ts │ ├── Navbar.d.ts │ ├── NavbarBrand.d.ts │ ├── NavbarText.d.ts │ ├── NavbarToggler.d.ts │ ├── Offcanvas.d.ts │ ├── OffcanvasBody.d.ts │ ├── OffcanvasHeader.d.ts │ ├── Pagination.d.ts │ ├── PaginationItem.d.ts │ ├── PaginationLink.d.ts │ ├── Placeholder.d.ts │ ├── PlaceholderButton.d.ts │ ├── Popover.d.ts │ ├── PopoverBody.d.ts │ ├── PopoverHeader.d.ts │ ├── Progress.d.ts │ ├── Row.d.ts │ ├── Spinner.d.ts │ ├── TabContent.d.ts │ ├── TabPane.d.ts │ ├── Table.d.ts │ ├── Tag.d.ts │ ├── Toast.d.ts │ ├── ToastBody.d.ts │ ├── ToastHeader.d.ts │ ├── Tooltip.d.ts │ ├── Uncontrolled.d.ts │ └── utils.d.ts ├── reactstrap-tests.tsx ├── tsconfig.json └── tslint.json └── yarn.lock /.eslintignore: -------------------------------------------------------------------------------- 1 | test/coverage/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | tidelift: npm/reactstrap 2 | custom: https://www.paypal.me/evansharp 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | - components: `name` 8 | - reactstrap version `#x.x.x` 9 | - import method `umd/csj/es` 10 | - react version `#x.x.x` 11 | - bootstrap version `#x.x.x` 12 | 13 | ### What is happening? 14 | 15 | 16 | 17 | ### What should be happening? 18 | 19 | 20 | 21 | ### Steps to reproduce issue 22 | 23 | 1. ... 24 | 2. ... 25 | 26 | ### Error message in console 27 | 28 | ``` 29 | paste error message with stacktrack here 30 | ``` 31 | 32 | ### Code 33 | 34 | 40 | -------------------------------------------------------------------------------- /.github/workflows/coverage.yml: -------------------------------------------------------------------------------- 1 | name: Test Coverage 2 | 3 | on: 4 | push: 5 | branches: [ master, bootstrap5 ] 6 | pull_request: 7 | branches: [ master, bootstrap5 ] 8 | 9 | jobs: 10 | 11 | build: 12 | runs-on: ubuntu-latest 13 | steps: 14 | 15 | - uses: actions/checkout@v2 16 | 17 | - name: Use Node.js 12.x 18 | uses: actions/setup-node@v1 19 | with: 20 | node-version: 12.x 21 | cache: 'yarn' 22 | 23 | - run: rm -rf node_modules && yarn install --frozen-lockfile 24 | - name: Run Coverage 25 | run: | 26 | npm run cover -- --runInBand 27 | - name: Upload to Coveralls 28 | uses: coverallsapp/github-action@master 29 | with: 30 | github-token: ${{ secrets.GITHUB_TOKEN }} 31 | -------------------------------------------------------------------------------- /.github/workflows/docs.yml: -------------------------------------------------------------------------------- 1 | name: Manually Publish Docs 2 | on: workflow_dispatch 3 | jobs: 4 | build: 5 | runs-on: ubuntu-latest 6 | steps: 7 | - uses: actions/checkout@v2 8 | # Setup .npmrc file to publish to npm 9 | - uses: actions/setup-node@v2 10 | with: 11 | node-version: '12.x' 12 | registry-url: 'https://registry.npmjs.org' 13 | - name: Install dependencies 14 | run: rm -rf node_modules && yarn install --frozen-lockfile 15 | - name: Publish Docs 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.REACTSTRAP_DOCS_GITHUB_TOKEN }} 18 | run: ./scripts/docs 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /coverage 2 | node_modules 3 | /dist 4 | /build 5 | /lib 6 | /esm 7 | /es 8 | .DS_Store 9 | .idea 10 | .history 11 | npm-debug.log 12 | package-lock.json 13 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 12 2 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /.storybook/main.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | stories: [ 3 | '../stories/**/*.stories.mdx', 4 | '../stories/**/*.stories.js' 5 | ], 6 | addons: [ 7 | '@storybook/addon-links', 8 | '@storybook/addon-docs' 9 | ], 10 | staticDirs: ['../static'] 11 | }; 12 | -------------------------------------------------------------------------------- /.storybook/manager-head.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.storybook/preview-head.html: -------------------------------------------------------------------------------- 1 | 5 | 9 | -------------------------------------------------------------------------------- /.storybook/preview.cjs: -------------------------------------------------------------------------------- 1 | export const parameters = { 2 | actions: { argTypesRegex: "^on[A-Z].*" }, 3 | controls: { 4 | hideNoControlsWarning: true, 5 | matchers: { 6 | date: /Date$/ 7 | }, 8 | }, 9 | options: { 10 | storySort: { 11 | order: ['Home', ['Installation', 'GitHub', 'Upgrading', 'Themes'], '*'] 12 | } 13 | }, 14 | viewMode: 'docs', 15 | previewTabs: { 16 | canvas: { hidden: true }, 17 | }, 18 | } 19 | -------------------------------------------------------------------------------- /.storybook/webpack.config.cjs: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = async ({ config }) => { 4 | config.resolve = { 5 | alias: { 6 | reactstrap: path.resolve(__dirname, '../src/') 7 | }, 8 | }; 9 | 10 | return config; 11 | }; 12 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Currently, only the latest version is supported. 6 | 7 | ## Reporting a Vulnerability 8 | 9 | ### Security contact information 10 | 11 | To report a security vulnerability, please use the 12 | [Tidelift security contact](https://tidelift.com/security). 13 | Tidelift will coordinate the fix and disclosure. 14 | -------------------------------------------------------------------------------- /__mocks__/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /__mocks__/react-popper.js: -------------------------------------------------------------------------------- 1 | 2 | export function Manager({ children }) { 3 | return (children); 4 | } 5 | 6 | export const Popper = jest.fn(({ children, placement }) => { 7 | return children({ 8 | ref: () => {}, 9 | placement, 10 | style: {}, 11 | arrowProps: { ref: () => {}, style: {} } }); 12 | }) 13 | 14 | export function Reference({ children }) { 15 | return children({ ref: () => {} }); 16 | } 17 | -------------------------------------------------------------------------------- /babel.build.config.cjs: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | extends: './babel.config.cjs', 4 | ignore: [/\.d.ts/, /\.(stories|spec|test)\.(js|ts|jsx|tsx?)$/], 5 | plugins: ["@babel/plugin-transform-modules-commonjs"] 6 | }; -------------------------------------------------------------------------------- /babel.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = api => { 2 | const isTest = api.env('test'); 3 | // TODO: Maybe use babel-preset env with browser targets and get rid of plugins 4 | return { 5 | "presets": isTest 6 | ? [['@babel/preset-env', {targets: {node: 'current'}}], "@babel/preset-react"] 7 | : ["@babel/preset-react"], 8 | "plugins": [ 9 | "@babel/plugin-proposal-export-default-from", 10 | "@babel/plugin-proposal-export-namespace-from", 11 | "@babel/plugin-proposal-object-rest-spread" 12 | ] 13 | }; 14 | }; 15 | -------------------------------------------------------------------------------- /babel.esm.config.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: './babel.config.cjs', 3 | presets: [ 4 | // Dont transform modules for the esm build 5 | ['@babel/preset-env', { modules: false }], 6 | ], 7 | }; 8 | -------------------------------------------------------------------------------- /config-overrides/index.cjs: -------------------------------------------------------------------------------- 1 | const { override, addBabelPlugins } = require('customize-cra'); 2 | 3 | module.exports = override(...addBabelPlugins('@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-export-namespace-from')); -------------------------------------------------------------------------------- /config-overrides/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "config-overrides", 3 | "version": "1.0.0", 4 | "main": "./index.cjs" 5 | } 6 | -------------------------------------------------------------------------------- /scripts/tag_release: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | set -e 4 | 5 | VERSION=$(node -p -e "require('./package.json').version") 6 | CURRENT_BRANCH="$(git symbolic-ref --short -q HEAD)" 7 | 8 | success() { 9 | echo -e "\033[32;1m$1" 10 | } 11 | 12 | error() { 13 | echo -e "\033[31;1m$1" 14 | } 15 | 16 | if [ -z "$CURRENT_BRANCH" ]; then 17 | error "Not in a branch." 18 | exit 1 19 | fi 20 | 21 | if [ -z "$VERSION" ]; then 22 | error "Unable to get current npm version of this package." 23 | exit 1 24 | fi 25 | 26 | git config user.name "Github Actions" 27 | git config user.email "reactstrap@github.io" 28 | git tag -a "v$VERSION" -m "release $VERSION" 29 | git push --set-upstream origin $CURRENT_BRANCH > /dev/null 2>&1 30 | git push --tags > /dev/null 2>&1 31 | 32 | success "pushed $VERSION tag to $CURRENT_BRANCH." 33 | -------------------------------------------------------------------------------- /src/AccordionContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * AccordionContext 5 | * { 6 | * toggle: PropTypes.func.isRequired, 7 | * openId: PropTypes.string, 8 | * } 9 | */ 10 | export const AccordionContext = React.createContext({}); 11 | -------------------------------------------------------------------------------- /src/ButtonDropdown.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Dropdown from './Dropdown'; 4 | 5 | const propTypes = { 6 | children: PropTypes.node, 7 | }; 8 | 9 | function ButtonDropdown(props) { 10 | return ; 11 | } 12 | 13 | ButtonDropdown.propTypes = propTypes; 14 | 15 | export default ButtonDropdown; 16 | -------------------------------------------------------------------------------- /src/CardColumns.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function CardColumns(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | const classes = mapToCssModules( 15 | classNames(className, 'card-columns'), 16 | cssModule, 17 | ); 18 | 19 | return ; 20 | } 21 | 22 | CardColumns.propTypes = propTypes; 23 | 24 | export default CardColumns; 25 | -------------------------------------------------------------------------------- /src/CardDeck.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function CardDeck(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | const classes = mapToCssModules( 15 | classNames(className, 'card-deck'), 16 | cssModule, 17 | ); 18 | 19 | return ; 20 | } 21 | 22 | CardDeck.propTypes = propTypes; 23 | 24 | export default CardDeck; 25 | -------------------------------------------------------------------------------- /src/CardFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function CardFooter(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'card-footer'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | CardFooter.propTypes = propTypes; 26 | 27 | export default CardFooter; 28 | -------------------------------------------------------------------------------- /src/CardGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function CardGroup(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | const classes = mapToCssModules( 15 | classNames(className, 'card-group'), 16 | cssModule, 17 | ); 18 | 19 | return ; 20 | } 21 | 22 | CardGroup.propTypes = propTypes; 23 | 24 | export default CardGroup; 25 | -------------------------------------------------------------------------------- /src/CardHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function CardHeader(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'card-header'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | CardHeader.propTypes = propTypes; 26 | 27 | export default CardHeader; 28 | -------------------------------------------------------------------------------- /src/CardImgOverlay.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function CardImgOverlay(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | const classes = mapToCssModules( 15 | classNames(className, 'card-img-overlay'), 16 | cssModule, 17 | ); 18 | 19 | return ; 20 | } 21 | 22 | CardImgOverlay.propTypes = propTypes; 23 | 24 | export default CardImgOverlay; 25 | -------------------------------------------------------------------------------- /src/CardLink.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | innerRef: PropTypes.oneOfType([ 9 | PropTypes.object, 10 | PropTypes.func, 11 | PropTypes.string, 12 | ]), 13 | className: PropTypes.string, 14 | cssModule: PropTypes.object, 15 | }; 16 | 17 | function CardLink(props) { 18 | const { 19 | className, 20 | cssModule, 21 | tag: Tag = 'a', 22 | innerRef, 23 | ...attributes 24 | } = props; 25 | const classes = mapToCssModules( 26 | classNames(className, 'card-link'), 27 | cssModule, 28 | ); 29 | 30 | return ; 31 | } 32 | 33 | CardLink.propTypes = propTypes; 34 | 35 | export default CardLink; 36 | -------------------------------------------------------------------------------- /src/CardSubtitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function CardSubtitle(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'card-subtitle'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | CardSubtitle.propTypes = propTypes; 26 | 27 | export default CardSubtitle; 28 | -------------------------------------------------------------------------------- /src/CardText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function CardText(props) { 16 | const { className, cssModule, tag: Tag = 'p', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'card-text'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | CardText.propTypes = propTypes; 26 | 27 | export default CardText; 28 | -------------------------------------------------------------------------------- /src/CardTitle.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function CardTitle(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'card-title'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | CardTitle.propTypes = propTypes; 26 | 27 | export default CardTitle; 28 | -------------------------------------------------------------------------------- /src/CarouselContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * CarouselContext 5 | * { 6 | * direction: PropTypes.oneOf(['start', 'end']).isRequired, 7 | * } 8 | */ 9 | export const CarouselContext = React.createContext({}); 10 | -------------------------------------------------------------------------------- /src/DropdownContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * DropdownContext 5 | * { 6 | * toggle: PropTypes.func.isRequired, 7 | * isOpen: PropTypes.bool.isRequired, 8 | * direction: PropTypes.oneOf(['up', 'down', 'start', 'end']).isRequired, 9 | * inNavbar: PropTypes.bool.isRequired, 10 | * disabled: PropTypes.bool 11 | * } 12 | */ 13 | export const DropdownContext = React.createContext({}); 14 | -------------------------------------------------------------------------------- /src/FormText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | children: PropTypes.node, 8 | inline: PropTypes.bool, 9 | tag: tagPropType, 10 | color: PropTypes.string, 11 | className: PropTypes.string, 12 | cssModule: PropTypes.object, 13 | }; 14 | 15 | function FormText(props) { 16 | const { 17 | className, 18 | cssModule, 19 | inline, 20 | color = 'muted', 21 | tag: Tag = 'small', 22 | ...attributes 23 | } = props; 24 | 25 | const classes = mapToCssModules( 26 | classNames( 27 | className, 28 | !inline ? 'form-text' : false, 29 | color ? `text-${color}` : false, 30 | ), 31 | cssModule, 32 | ); 33 | 34 | return ; 35 | } 36 | 37 | FormText.propTypes = propTypes; 38 | 39 | export default FormText; 40 | -------------------------------------------------------------------------------- /src/InputGroupContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const InputGroupContext = React.createContext({}); 4 | -------------------------------------------------------------------------------- /src/InputGroupText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function InputGroupText(props) { 16 | const { className, cssModule, tag: Tag = 'span', ...attributes } = props; 17 | 18 | const classes = mapToCssModules( 19 | classNames(className, 'input-group-text'), 20 | cssModule, 21 | ); 22 | 23 | return ; 24 | } 25 | 26 | InputGroupText.propTypes = propTypes; 27 | 28 | export default InputGroupText; 29 | -------------------------------------------------------------------------------- /src/ListGroupItemHeading.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function ListGroupItemHeading(props) { 16 | const { className, cssModule, tag: Tag = 'h5', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'list-group-item-heading'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | ListGroupItemHeading.propTypes = propTypes; 26 | 27 | export default ListGroupItemHeading; 28 | -------------------------------------------------------------------------------- /src/ListGroupItemText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function ListGroupItemText(props) { 16 | const { className, cssModule, tag: Tag = 'p', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'list-group-item-text'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | ListGroupItemText.propTypes = propTypes; 26 | 27 | export default ListGroupItemText; 28 | -------------------------------------------------------------------------------- /src/ListInlineItem.js: -------------------------------------------------------------------------------- 1 | import React, { forwardRef } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | const ListInlineItem = forwardRef((props, ref) => { 16 | const { className, cssModule, tag: Tag = 'li', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'list-inline-item'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | }); 24 | 25 | ListInlineItem.name = 'ListInlineItem'; 26 | ListInlineItem.propTypes = propTypes; 27 | 28 | export default ListInlineItem; 29 | -------------------------------------------------------------------------------- /src/ModalBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function ModalBody(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'modal-body'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | ModalBody.propTypes = propTypes; 26 | 27 | export default ModalBody; 28 | -------------------------------------------------------------------------------- /src/ModalFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function ModalFooter(props) { 16 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 17 | const classes = mapToCssModules( 18 | classNames(className, 'modal-footer'), 19 | cssModule, 20 | ); 21 | 22 | return ; 23 | } 24 | 25 | ModalFooter.propTypes = propTypes; 26 | 27 | export default ModalFooter; 28 | -------------------------------------------------------------------------------- /src/NavbarBrand.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | }; 14 | 15 | function NavbarBrand(props) { 16 | const { className, cssModule, tag: Tag = 'a', ...attributes } = props; 17 | 18 | const classes = mapToCssModules( 19 | classNames(className, 'navbar-brand'), 20 | cssModule, 21 | ); 22 | 23 | return ; 24 | } 25 | 26 | NavbarBrand.propTypes = propTypes; 27 | 28 | export default NavbarBrand; 29 | -------------------------------------------------------------------------------- /src/NavbarText.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | /** Add custom class */ 8 | className: PropTypes.string, 9 | /** Change underlying component's CSS base class name */ 10 | cssModule: PropTypes.object, 11 | /** Set a custom element for this component */ 12 | tag: tagPropType, 13 | active: PropTypes.bool, 14 | }; 15 | 16 | function NavbarText(props) { 17 | const { 18 | className, 19 | cssModule, 20 | active, 21 | tag: Tag = 'span', 22 | ...attributes 23 | } = props; 24 | 25 | const classes = mapToCssModules( 26 | classNames(className, 'navbar-text'), 27 | cssModule, 28 | ); 29 | 30 | return ; 31 | } 32 | 33 | NavbarText.propTypes = propTypes; 34 | 35 | export default NavbarText; 36 | -------------------------------------------------------------------------------- /src/OffcanvasBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function OffcanvasBody(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | const classes = mapToCssModules( 15 | classNames(className, 'offcanvas-body'), 16 | cssModule, 17 | ); 18 | 19 | return ; 20 | } 21 | 22 | OffcanvasBody.propTypes = propTypes; 23 | 24 | export default OffcanvasBody; 25 | -------------------------------------------------------------------------------- /src/Popover.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import TooltipPopoverWrapper, { propTypes } from './TooltipPopoverWrapper'; 4 | 5 | const defaultProps = { 6 | placement: 'right', 7 | placementPrefix: 'bs-popover', 8 | trigger: 'click', 9 | offset: [0, 8], 10 | }; 11 | 12 | function Popover(props) { 13 | const popperClasses = classNames('popover', 'show', props.popperClassName); 14 | 15 | const classes = classNames('popover-inner', props.innerClassName); 16 | 17 | return ( 18 | 24 | ); 25 | } 26 | 27 | Popover.propTypes = propTypes; 28 | Popover.defaultProps = defaultProps; 29 | 30 | export default Popover; 31 | -------------------------------------------------------------------------------- /src/PopoverBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function PopoverBody(props) { 13 | const { className, cssModule, tag: Tag = 'div', ...attributes } = props; 14 | 15 | const classes = mapToCssModules( 16 | classNames(className, 'popover-body'), 17 | cssModule, 18 | ); 19 | 20 | return ; 21 | } 22 | 23 | PopoverBody.propTypes = propTypes; 24 | 25 | export default PopoverBody; 26 | -------------------------------------------------------------------------------- /src/PopoverHeader.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | }; 11 | 12 | function PopoverHeader(props) { 13 | const { className, cssModule, tag: Tag = 'h3', ...attributes } = props; 14 | 15 | const classes = mapToCssModules( 16 | classNames(className, 'popover-header'), 17 | cssModule, 18 | ); 19 | 20 | return ; 21 | } 22 | 23 | PopoverHeader.propTypes = propTypes; 24 | 25 | export default PopoverHeader; 26 | -------------------------------------------------------------------------------- /src/PopperTargetHelper.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types'; 2 | import { getTarget, targetPropType } from './utils'; 3 | 4 | function PopperTargetHelper(props, context) { 5 | context.popperManager.setTargetNode(getTarget(props.target)); 6 | return null; 7 | } 8 | 9 | PopperTargetHelper.contextTypes = { 10 | popperManager: PropTypes.object.isRequired, 11 | }; 12 | 13 | PopperTargetHelper.propTypes = { 14 | target: targetPropType.isRequired, 15 | }; 16 | 17 | export default PopperTargetHelper; 18 | -------------------------------------------------------------------------------- /src/Portal.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import PropTypes from 'prop-types'; 4 | import { canUseDOM } from './utils'; 5 | 6 | const propTypes = { 7 | children: PropTypes.node.isRequired, 8 | node: PropTypes.any, 9 | }; 10 | 11 | class Portal extends React.Component { 12 | componentWillUnmount() { 13 | if (this.defaultNode) { 14 | document.body.removeChild(this.defaultNode); 15 | } 16 | this.defaultNode = null; 17 | } 18 | 19 | render() { 20 | if (!canUseDOM) { 21 | return null; 22 | } 23 | 24 | if (!this.props.node && !this.defaultNode) { 25 | this.defaultNode = document.createElement('div'); 26 | document.body.appendChild(this.defaultNode); 27 | } 28 | 29 | return ReactDOM.createPortal( 30 | this.props.children, 31 | this.props.node || this.defaultNode, 32 | ); 33 | } 34 | } 35 | 36 | Portal.propTypes = propTypes; 37 | 38 | export default Portal; 39 | -------------------------------------------------------------------------------- /src/TabContext.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | /** 4 | * TabContext 5 | * { 6 | * activeTabId: PropTypes.any 7 | * } 8 | */ 9 | export const TabContext = React.createContext({}); 10 | -------------------------------------------------------------------------------- /src/ToastBody.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import classNames from 'classnames'; 4 | import { mapToCssModules, tagPropType } from './utils'; 5 | 6 | const propTypes = { 7 | tag: tagPropType, 8 | className: PropTypes.string, 9 | cssModule: PropTypes.object, 10 | innerRef: PropTypes.oneOfType([ 11 | PropTypes.object, 12 | PropTypes.string, 13 | PropTypes.func, 14 | ]), 15 | }; 16 | 17 | function ToastBody(props) { 18 | const { 19 | className, 20 | cssModule, 21 | innerRef, 22 | tag: Tag = 'div', 23 | ...attributes 24 | } = props; 25 | const classes = mapToCssModules( 26 | classNames(className, 'toast-body'), 27 | cssModule, 28 | ); 29 | 30 | return ; 31 | } 32 | 33 | ToastBody.propTypes = propTypes; 34 | 35 | export default ToastBody; 36 | -------------------------------------------------------------------------------- /src/Tooltip.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import classNames from 'classnames'; 3 | import TooltipPopoverWrapper, { propTypes } from './TooltipPopoverWrapper'; 4 | 5 | const defaultProps = { 6 | placement: 'top', 7 | autohide: true, 8 | placementPrefix: 'bs-tooltip', 9 | trigger: 'hover focus', 10 | }; 11 | 12 | function Tooltip(props) { 13 | const popperClasses = classNames('tooltip', 'show', props.popperClassName); 14 | 15 | const classes = classNames('tooltip-inner', props.innerClassName); 16 | 17 | return ( 18 | 24 | ); 25 | } 26 | 27 | Tooltip.propTypes = propTypes; 28 | Tooltip.defaultProps = defaultProps; 29 | 30 | export default Tooltip; 31 | -------------------------------------------------------------------------------- /src/UncontrolledAlert.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Alert from './Alert'; 3 | 4 | class UncontrolledAlert extends Component { 5 | constructor(props) { 6 | super(props); 7 | 8 | this.state = { isOpen: true }; 9 | this.toggle = this.toggle.bind(this); 10 | } 11 | 12 | toggle() { 13 | this.setState((prevState) => ({ isOpen: !prevState.isOpen })); 14 | } 15 | 16 | render() { 17 | return ( 18 | 19 | ); 20 | } 21 | } 22 | 23 | export default UncontrolledAlert; 24 | -------------------------------------------------------------------------------- /src/UncontrolledButtonDropdown.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import ButtonDropdown from './ButtonDropdown'; 4 | import { omit } from './utils'; 5 | 6 | const omitKeys = ['defaultOpen']; 7 | 8 | export default class UncontrolledButtonDropdown extends Component { 9 | constructor(props) { 10 | super(props); 11 | 12 | this.state = { isOpen: props.defaultOpen || false }; 13 | this.toggle = this.toggle.bind(this); 14 | } 15 | 16 | toggle() { 17 | this.setState((prevState) => ({ isOpen: !prevState.isOpen })); 18 | } 19 | 20 | render() { 21 | return ( 22 | 27 | ); 28 | } 29 | } 30 | 31 | UncontrolledButtonDropdown.propTypes = { 32 | defaultOpen: PropTypes.bool, 33 | ...ButtonDropdown.propTypes, 34 | }; 35 | -------------------------------------------------------------------------------- /src/UncontrolledPopover.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Popover from './Popover'; 4 | import { omit } from './utils'; 5 | 6 | const omitKeys = ['defaultOpen']; 7 | 8 | export default class UncontrolledPopover extends Component { 9 | constructor(props) { 10 | super(props); 11 | 12 | this.state = { isOpen: props.defaultOpen || false }; 13 | this.toggle = this.toggle.bind(this); 14 | } 15 | 16 | toggle() { 17 | this.setState((prevState) => ({ isOpen: !prevState.isOpen })); 18 | } 19 | 20 | render() { 21 | return ( 22 | 27 | ); 28 | } 29 | } 30 | 31 | UncontrolledPopover.propTypes = { 32 | defaultOpen: PropTypes.bool, 33 | ...Popover.propTypes, 34 | }; 35 | -------------------------------------------------------------------------------- /src/UncontrolledTooltip.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Tooltip from './Tooltip'; 4 | import { omit } from './utils'; 5 | 6 | const omitKeys = ['defaultOpen']; 7 | 8 | export default class UncontrolledTooltip extends Component { 9 | constructor(props) { 10 | super(props); 11 | 12 | this.state = { isOpen: props.defaultOpen || false }; 13 | this.toggle = this.toggle.bind(this); 14 | } 15 | 16 | toggle() { 17 | this.setState((prevState) => ({ isOpen: !prevState.isOpen })); 18 | } 19 | 20 | render() { 21 | return ( 22 | 27 | ); 28 | } 29 | } 30 | 31 | UncontrolledTooltip.propTypes = { 32 | defaultOpen: PropTypes.bool, 33 | ...Tooltip.propTypes, 34 | }; 35 | -------------------------------------------------------------------------------- /src/__tests__/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | }, 5 | "globals": { 6 | "createSpyObj": true 7 | }, 8 | "rules": { 9 | "import/no-unresolved": 0, 10 | "import/no-extraneous-dependencies": 0, 11 | "react/no-multi-comp": 0, 12 | "react/prop-types": 0, 13 | "react/no-find-dom-node": 0, 14 | "react/no-array-index-key": 0, 15 | "no-template-curly-in-string": 0, 16 | "jsx-a11y/no-static-element-interactions": 0, 17 | "react/button-has-type": 0, 18 | "no-shadow": 0, 19 | "react/jsx-no-bind": 0, 20 | "no-unused-vars": 0, 21 | "no-empty-function": 0, 22 | "jsx-a11y/control-has-associated-label": 0, 23 | "prefer-spread": 0, 24 | "prefer-rest-params": 0 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/__tests__/AccordionItem.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import '@testing-library/jest-dom'; 4 | import { AccordionItem } from '..'; 5 | import { testForCustomClass, testForCustomTag } from '../testUtils'; 6 | 7 | describe('AccordionItem', () => { 8 | it('should render with "accordion-item" class', () => { 9 | render(); 10 | 11 | expect(screen.getByTestId('accordion-item')).toHaveClass('accordion-item'); 12 | }); 13 | 14 | it('should render additional classes', () => { 15 | testForCustomClass(AccordionItem); 16 | }); 17 | 18 | it('should render custom tag', () => { 19 | testForCustomTag(AccordionItem); 20 | }); 21 | }); 22 | -------------------------------------------------------------------------------- /src/__tests__/ButtonToolbar.spec.js: -------------------------------------------------------------------------------- 1 | import { ButtonToolbar } from '..'; 2 | import { 3 | testForChildrenInComponent, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('ButtonToolbar', () => { 9 | it('should render children', () => { 10 | testForChildrenInComponent(ButtonToolbar); 11 | }); 12 | 13 | it('should render with the "btn-toolbar" class', () => { 14 | testForDefaultClass(ButtonToolbar, 'btn-toolbar'); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(ButtonToolbar); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardBody.spec.js: -------------------------------------------------------------------------------- 1 | import { CardBody } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardBody', () => { 9 | it('should render with "card-body" class', () => { 10 | testForDefaultClass(CardBody, 'card-body'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardBody); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardBody); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardColumns.spec.js: -------------------------------------------------------------------------------- 1 | import { CardColumns } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardColumns', () => { 9 | it('should render with "card-columns" class', () => { 10 | testForDefaultClass(CardColumns, 'card-columns'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardColumns); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardColumns); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardDeck.spec.js: -------------------------------------------------------------------------------- 1 | import { CardDeck } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardDeck', () => { 9 | it('should render with "card-deck" class', () => { 10 | testForDefaultClass(CardDeck, 'card-deck'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardDeck); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardDeck); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardFooter.spec.js: -------------------------------------------------------------------------------- 1 | import { CardFooter } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardFooter', () => { 9 | it('should render with "card-footer" class', () => { 10 | testForDefaultClass(CardFooter, 'card-footer'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardFooter); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardFooter); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardGroup.spec.js: -------------------------------------------------------------------------------- 1 | import { CardGroup } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardGroup', () => { 9 | it('should render with "card-group" class', () => { 10 | testForDefaultClass(CardGroup, 'card-group'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardGroup); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardGroup); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardHeader.spec.js: -------------------------------------------------------------------------------- 1 | import { CardHeader } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardHeader', () => { 9 | it('should render with "card-header" class', () => { 10 | testForDefaultClass(CardHeader, 'card-header'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardHeader); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardHeader); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardImgOverlay.spec.js: -------------------------------------------------------------------------------- 1 | import { CardImgOverlay } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardImgOverlay', () => { 9 | it('should render with "card-img-overlay" class', () => { 10 | testForDefaultClass(CardImgOverlay, 'card-img-overlay'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardImgOverlay); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardImgOverlay); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardLink.spec.js: -------------------------------------------------------------------------------- 1 | import { CardLink } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardLink', () => { 9 | it('should render with "card-link" class', () => { 10 | testForDefaultClass(CardLink, 'card-link'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardLink); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardLink); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardSubtitle.spec.js: -------------------------------------------------------------------------------- 1 | import { CardSubtitle } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | testForDefaultTag, 7 | } from '../testUtils'; 8 | 9 | describe('CardSubtitle', () => { 10 | it('should render with "card-subtitle" class', () => { 11 | testForDefaultClass(CardSubtitle, 'card-subtitle'); 12 | }); 13 | 14 | it('should render additional classes', () => { 15 | testForCustomClass(CardSubtitle); 16 | }); 17 | 18 | it('should render custom tag', () => { 19 | testForCustomTag(CardSubtitle); 20 | }); 21 | 22 | it('should render a "div" tag by default', () => { 23 | testForDefaultTag(CardSubtitle, 'div'); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/__tests__/CardText.spec.js: -------------------------------------------------------------------------------- 1 | import { CardText } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('CardText', () => { 9 | it('should render with "card-text" class', () => { 10 | testForDefaultClass(CardText, 'card-text'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(CardText); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(CardText); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/CardTitle.spec.js: -------------------------------------------------------------------------------- 1 | import { CardTitle } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | testForDefaultTag, 7 | } from '../testUtils'; 8 | 9 | describe('CardTitle', () => { 10 | it('should render with "card-title" class', () => { 11 | testForDefaultClass(CardTitle, 'card-title'); 12 | }); 13 | 14 | it('should render additional classes', () => { 15 | testForCustomClass(CardTitle); 16 | }); 17 | 18 | it('should render custom tag', () => { 19 | testForCustomTag(CardTitle); 20 | }); 21 | 22 | it('should render a "div" tag by default', () => { 23 | testForDefaultTag(CardTitle, 'div'); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/__tests__/Form.spec.js: -------------------------------------------------------------------------------- 1 | import { Form } from '..'; 2 | import { 3 | testForChildrenInComponent, 4 | testForCustomClass, 5 | testForCustomTag, 6 | testForDefaultTag, 7 | } from '../testUtils'; 8 | 9 | describe('Form', () => { 10 | it('should render with "form" tag', () => { 11 | testForDefaultTag(Form, 'form'); 12 | }); 13 | 14 | it('should render children', () => { 15 | testForChildrenInComponent(Form); 16 | }); 17 | 18 | it('should render additional classes', () => { 19 | testForCustomClass(Form); 20 | }); 21 | 22 | it('should render custom tag', () => { 23 | testForCustomTag(Form); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/__tests__/InputGroupText.spec.js: -------------------------------------------------------------------------------- 1 | import { InputGroupText } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | testForDefaultTag, 7 | } from '../testUtils'; 8 | 9 | describe('InputGroupText', () => { 10 | it('should render with "input-group-text" class', () => { 11 | testForDefaultClass(InputGroupText, 'input-group-text'); 12 | }); 13 | 14 | it('should render additional classes', () => { 15 | testForCustomClass(InputGroupText); 16 | }); 17 | 18 | it('should render with "span" tag by default', () => { 19 | testForDefaultTag(InputGroupText, 'span'); 20 | }); 21 | 22 | it('should render custom tag', () => { 23 | testForCustomTag(InputGroupText); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/__tests__/ListGroupItemHeading.spec.js: -------------------------------------------------------------------------------- 1 | import { ListGroupItemHeading } from '..'; 2 | import { testForChildrenInComponent, testForDefaultClass } from '../testUtils'; 3 | 4 | describe('ListGroupItem', () => { 5 | it('should render children', () => { 6 | testForChildrenInComponent(ListGroupItemHeading); 7 | }); 8 | 9 | it('should render with "list-group-item-heading" class', () => { 10 | testForDefaultClass(ListGroupItemHeading, 'list-group-item-heading'); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/__tests__/ListGroupItemText.spec.js: -------------------------------------------------------------------------------- 1 | import { ListGroupItemText } from '..'; 2 | import { 3 | testForChildrenInComponent, 4 | testForCustomClass, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('ListGroupItem', () => { 9 | it('should render children', () => { 10 | testForChildrenInComponent(ListGroupItemText); 11 | }); 12 | 13 | it('should render with "list-group-item-text" class', () => { 14 | testForDefaultClass(ListGroupItemText, 'list-group-item-text'); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /src/__tests__/ListInlineItem.spec.js: -------------------------------------------------------------------------------- 1 | import { ListInlineItem } from '..'; 2 | import { 3 | testForChildrenInComponent, 4 | testForCustomClass, 5 | testForCustomTag, 6 | testForDefaultClass, 7 | } from '../testUtils'; 8 | 9 | describe('ListInlineItem', () => { 10 | it('should render children', () => { 11 | testForChildrenInComponent(ListInlineItem); 12 | }); 13 | 14 | it('should render with "list-inline-item" class', () => { 15 | testForDefaultClass(ListInlineItem, 'list-inline-item'); 16 | }); 17 | 18 | it('should render additional classes', () => { 19 | testForCustomClass(ListInlineItem); 20 | }); 21 | 22 | it('should render custom tag', () => { 23 | testForCustomTag(ListInlineItem); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/__tests__/ModalBody.spec.js: -------------------------------------------------------------------------------- 1 | import { ModalBody } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('ModalBody', () => { 9 | it('should render with "modal-body" class', () => { 10 | testForDefaultClass(ModalBody, 'modal-body'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(ModalBody, {}); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(ModalBody); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/ModalFooter.spec.js: -------------------------------------------------------------------------------- 1 | import { ModalFooter } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('ModalFooter', () => { 9 | it('should render with "modal-footer" class', () => { 10 | testForDefaultClass(ModalFooter, 'modal-footer'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(ModalFooter); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(ModalFooter); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/OffcanvasBody.spec.js: -------------------------------------------------------------------------------- 1 | import { OffcanvasBody } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('OffcanvasBody', () => { 9 | it('should render with "offcanvas-body" class', () => { 10 | testForDefaultClass(OffcanvasBody, 'offcanvas-body '); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(OffcanvasBody); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(OffcanvasBody); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/PlaceholderButton.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { PlaceholderButton } from '..'; 4 | 5 | describe('PlaceholderButton', () => { 6 | it('should render a placeholder', () => { 7 | const wrapper = shallow(); 8 | expect(wrapper.hasClass('placeholder')).toBe(true); 9 | }); 10 | 11 | it('should render size', () => { 12 | const wrapper = shallow(); 13 | expect(wrapper.hasClass('col-6')).toBe(true); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /src/__tests__/Popover.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Popover from '../Popover'; 4 | 5 | describe('Tooltip', () => { 6 | it('should apply popperClassName to popper component', () => { 7 | const div = document.createElement('div'); 8 | div.setAttribute('id', 'tooltip-target'); 9 | document.body.appendChild(div); 10 | 11 | const wrapper = mount( 12 | 13 | Tooltip Content 14 | , 15 | ); 16 | 17 | const tooltipPopoverWrapper = wrapper.find('TooltipPopoverWrapper'); 18 | expect( 19 | tooltipPopoverWrapper 20 | .find({ popperClassName: 'popover show boba-was-here' }) 21 | .exists(), 22 | ).toBe(true); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/__tests__/PopoverBody.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { PopoverBody } from '..'; 4 | 5 | describe('PopoverBody', () => { 6 | it('should render children', () => { 7 | const wrapper = shallow(Ello world); 8 | 9 | expect(wrapper.text()).toBe('Ello world'); 10 | expect(wrapper.hasClass('popover-body')).toBe(true); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/__tests__/PopoverHeader.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { shallow } from 'enzyme'; 3 | import { PopoverHeader } from '..'; 4 | 5 | describe('PopoverHeader', () => { 6 | it('should render children', () => { 7 | const wrapper = shallow(Ello world); 8 | 9 | expect(wrapper.text()).toBe('Ello world'); 10 | expect(wrapper.hasClass('popover-header')).toBe(true); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/__tests__/ToastBody.spec.js: -------------------------------------------------------------------------------- 1 | import { ToastBody } from '..'; 2 | import { 3 | testForCustomClass, 4 | testForCustomTag, 5 | testForDefaultClass, 6 | } from '../testUtils'; 7 | 8 | describe('ToastBody', () => { 9 | it('should render with "toast-body" class', () => { 10 | testForDefaultClass(ToastBody, 'toast-body'); 11 | }); 12 | 13 | it('should render additional classes', () => { 14 | testForCustomClass(ToastBody); 15 | }); 16 | 17 | it('should render custom tag', () => { 18 | testForCustomTag(ToastBody); 19 | }); 20 | }); 21 | -------------------------------------------------------------------------------- /src/__tests__/Tooltip.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Tooltip from '../Tooltip'; 4 | 5 | describe('Tooltip', () => { 6 | it('should apply popperClassName to popper component', () => { 7 | const div = document.createElement('div'); 8 | div.setAttribute('id', 'tooltip-target'); 9 | document.body.appendChild(div); 10 | 11 | const wrapper = mount( 12 | 13 | Tooltip Content 14 | , 15 | ); 16 | 17 | const tooltipPopoverWrapper = wrapper.find('TooltipPopoverWrapper'); 18 | expect( 19 | tooltipPopoverWrapper 20 | .find({ popperClassName: 'tooltip show boba-was-here' }) 21 | .exists(), 22 | ).toBe(true); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/polyfill.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | if (typeof window !== 'object' || typeof window.CustomEvent === 'function') 3 | return; 4 | 5 | const CustomEvent = (event, params) => { 6 | params = params || { bubbles: false, cancelable: false, detail: null }; 7 | let evt = document.createEvent('CustomEvent'); 8 | evt.initCustomEvent( 9 | event, 10 | params.bubbles, 11 | params.cancelable, 12 | params.detail, 13 | ); 14 | return evt; 15 | }; 16 | 17 | window.CustomEvent = CustomEvent; 18 | })(); 19 | 20 | (() => { 21 | if (typeof Object.values === 'function') return; 22 | 23 | const values = (O) => Object.keys(O).map((key) => O[key]); 24 | 25 | Object.values = values; 26 | })(); 27 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | /* global jest */ 2 | import Enzyme from 'enzyme'; 3 | import Adapter from 'enzyme-adapter-react-16'; 4 | 5 | Enzyme.configure({ adapter: new Adapter() }); 6 | 7 | global.requestAnimationFrame = function (cb) { 8 | cb(0); 9 | }; 10 | global.window.cancelAnimationFrame = function () {}; 11 | global.createSpyObj = (baseName, methodNames) => { 12 | const obj = {}; 13 | 14 | for (let i = 0; i < methodNames.length; i += 1) { 15 | obj[methodNames[i]] = jest.fn(); 16 | } 17 | 18 | return obj; 19 | }; 20 | global.document.createRange = () => ({ 21 | setStart: () => {}, 22 | setEnd: () => {}, 23 | commonAncestorContainer: {}, 24 | }); 25 | -------------------------------------------------------------------------------- /static/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mattstern31/react-strap-static-config/2d8a4960aea0afb57eaceed1517ff3839adb911b/static/themes/bamburgh-react-admin-dashboard-reactstrap-pro.jpg -------------------------------------------------------------------------------- /stories/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-unused-vars": ["error", { "args": "none" }] 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /stories/Accordion.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Accordion', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Accordion](https://getbootstrap.com/docs/5.1/components/accordion/) 8 | 9 | Used to build vertically collapsing accordions. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Accordion } from './examples/Accordion/Accordion'; 17 | export { default as Flush } from './examples/Accordion/AccordionFlush'; 18 | export { default as Uncontrolled } from './examples/Accordion/AccordionUncontrolled'; 19 | export { default as StayOpen } from './examples/Accordion/AccordionStayOpen'; 20 | export { default as Props } from './examples/Accordion/AccordionProps'; 21 | -------------------------------------------------------------------------------- /stories/Alert.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Alert', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Alert](https://getbootstrap.com/docs/5.1/components/alerts/) 8 | 9 | Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Alert } from './examples/Alert/Alert'; 17 | export { default as Colors } from './examples/Alert/Colors'; 18 | export { default as Content } from './examples/Alert/Content'; 19 | export { default as AlertLink } from './examples/Alert/Link'; 20 | export { default as Dismiss } from './examples/Alert/Dismiss'; 21 | export { default as UncontrolledDismiss } from './examples/Alert/UncontrolledDismiss'; 22 | export { default as Props } from './examples/Alert/Props'; 23 | -------------------------------------------------------------------------------- /stories/Badge.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Badge', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Badge](https://getbootstrap.com/docs/5.1/components/badge/) 8 | 9 | A small count and labeling component. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Badge } from './examples/Badge/Badge'; 17 | export { default as Headings } from './examples/Badge/Headings'; 18 | export { default as Buttons } from './examples/Badge/Button'; 19 | export { default as BackgroundColors } from './examples/Badge/Variations'; 20 | export { default as Links } from './examples/Badge/Links'; 21 | export { default as PillBadges } from './examples/Badge/Pills'; 22 | export { default as Props } from './examples/Badge/Props'; 23 | -------------------------------------------------------------------------------- /stories/Breadcrumb.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Breadcrumb', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Breadcrumb](https://getbootstrap.com/docs/5.1/components/breadcrumb/) 8 | 9 | Indicate the current page’s location within a navigational hierarchy that automatically adds separators. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Breadcrumb } from './examples/Breadcrump/Breadcrumb'; 17 | export { default as NoList } from './examples/Breadcrump/NoList'; 18 | export { default as Props } from './examples/Breadcrump/Props'; 19 | -------------------------------------------------------------------------------- /stories/Button.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Button', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Buttons](https://getbootstrap.com/docs/5.1/components/buttons/) 8 | 9 | Custom Buttons for actions in forms, dialogs, and more with support for multiple sizes, states, and more. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Button } from './examples/Button/Button'; 17 | export { default as Variants } from './examples/Button/Colors'; 18 | export { default as CustomTags } from './examples/Button/Tags'; 19 | export { default as Outline } from './examples/Button/Outline'; 20 | export { default as Sizes } from './examples/Button/Size'; 21 | export { default as Disabled } from './examples/Button/Disabled'; 22 | export { default as Props } from './examples/Button/Props'; 23 | -------------------------------------------------------------------------------- /stories/Carousel.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Carousel', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Carousel](https://getbootstrap.com/docs/5.1/components/carousel/) 8 | 9 | A slideshow component for cycling through elements, images, or slides of text — like a carousel. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Carousel } from './examples/Carousel/Carousel'; 17 | export { default as CustomTag } from './examples/Carousel/CustomTag'; 18 | export { default as Uncontrolled } from './examples/Carousel/Uncontrolled'; 19 | export { default as Props } from './examples/Carousel/Props'; 20 | -------------------------------------------------------------------------------- /stories/CloseButton.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/CloseButton', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap CloseButton](https://getbootstrap.com/docs/5.2/components/close-button/) 8 | 9 | A generic close button for dismissing content like modals and alerts. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as CloseButton } from './examples/CloseButton/CloseButton'; 17 | export { default as CloseButtonDisabled } from './examples/CloseButton/Disabled'; 18 | export { default as CloseButtonWhite } from './examples/CloseButton/White'; 19 | export { default as Props } from './examples/CloseButton/Props'; 20 | -------------------------------------------------------------------------------- /stories/Collapse.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Collapse', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Collapse](https://getbootstrap.com/docs/5.1/components/collapse/) 8 | 9 | Toggle the visibility of content across your project with Collapse. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Collapse } from './examples/Collapse/Collapse'; 17 | export { default as CollapseEvents } from './examples/Collapse/Events'; 18 | export { default as CollapseHorizontal } from './examples/Collapse/Horizontal'; 19 | export { default as CollapseUncontrolled } from './examples/Collapse/Uncontrolled'; 20 | export { default as Props } from './examples/Collapse/Props'; 21 | -------------------------------------------------------------------------------- /stories/Fade.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Fade', 3 | }; 4 | 5 | export { default as Fade } from './examples/Fade'; 6 | export { default as Props } from './examples/FadeProps'; 7 | -------------------------------------------------------------------------------- /stories/GitHub.stories.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | import { Button } from 'reactstrap'; 3 | 4 | 5 | 6 | ### Reactstrap is hosted on GitHub: 7 | 8 | [https://github.com/reactstrap/reactstrap](https://github.com/reactstrap/reactstrap) 9 | 10 | For support, please create [an issue](https://github.com/reactstrap/reactstrap/issues). 11 | -------------------------------------------------------------------------------- /stories/InputGroup.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/InputGroup', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap InputGroup](https://getbootstrap.com/docs/5.1/forms/input-group/) 8 | 9 | Extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as InputGroup } from './examples/InputGroup/Overview'; 17 | export { default as Sizing } from './examples/InputGroup/Sizing'; 18 | export { default as MultipleAddons } from './examples/InputGroup/Addon'; 19 | export { default as ButtonAddons } from './examples/InputGroup/Button'; 20 | export { default as ButtonShorthand } from './examples/InputGroup/ButtonShorthand'; 21 | export { default as Props } from './examples/InputGroup/Props'; 22 | -------------------------------------------------------------------------------- /stories/Layout.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Layout', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Layout](https://getbootstrap.com/docs/5.1/layout/grid/) 8 | 9 | Powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Layout } from './examples/Layout'; 17 | export { default as LayoutRowCols } from './examples/LayoutRowCols'; 18 | export { default as ContainerResponsive } from './examples/ContainerResponsive'; 19 | export { default as Props } from './examples/LayoutProps'; 20 | -------------------------------------------------------------------------------- /stories/List.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/List', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: 7 | '[Bootstrap Lists](https://getbootstrap.com/docs/5.1/content/typography/#lists)', 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export { default as List } from './examples/List/List'; 14 | export { default as Inline } from './examples/List/Inline'; 15 | export { default as Unstyled } from './examples/List/Unstyled'; 16 | export { default as Props } from './examples/List/Props'; 17 | -------------------------------------------------------------------------------- /stories/Nav.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Nav', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Navs](https://getbootstrap.com/docs/5.1/components/navs-tabs/) 8 | 9 | Bootstrap’s navigation components. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Navs } from './examples/Nav/Navs'; 17 | export { default as Vertical } from './examples/Nav/Vertical'; 18 | export { default as Tabs } from './examples/Nav/Tabs'; 19 | export { default as Pills } from './examples/Nav/Pills'; 20 | export { default as Fill } from './examples/Nav/Fill'; 21 | export { default as Justify } from './examples/Nav/Justify'; 22 | export { default as TabPane } from './examples/Nav/TabPane'; 23 | export { default as Props } from './examples/Nav/Props'; 24 | -------------------------------------------------------------------------------- /stories/Navbar.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Navbar', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Navbar](https://getbootstrap.com/docs/5.1/components/navbar/) 8 | 9 | Bootstrap’s powerful, responsive navigation header. Includes support for branding, navigation, and more. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Navbar } from './examples/Navbar/Navbar'; 17 | export { default as Brand } from './examples/Navbar/Brand'; 18 | export { default as NavbarToggler } from './examples/Navbar/Toggler'; 19 | export { default as Props } from './examples/Navbar/Props'; 20 | -------------------------------------------------------------------------------- /stories/Offcanvas.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Offcanvas', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Offcanvas](https://getbootstrap.com/docs/5.1/components/offcanvas/) 8 | 9 | Add hidden sidebars into your project for navigation, shopping carts, and more. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Offcanvas } from './examples/Offcanvas'; 17 | export { default as Props } from './examples/OffcanvasProps'; 18 | -------------------------------------------------------------------------------- /stories/Pagination.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Pagination', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Pagination](https://getbootstrap.com/docs/5.1/components/pagination/) 8 | 9 | Use Pagination to indicate that a series of related content exists across multiple pages. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Pagination } from './examples/Pagination/Pagination'; 17 | export { default as Large } from './examples/Pagination/SizingLarge'; 18 | export { default as Small } from './examples/Pagination/SizingSmall'; 19 | export { default as State } from './examples/Pagination/State'; 20 | export { default as Props } from './examples/Pagination/Props'; 21 | -------------------------------------------------------------------------------- /stories/Placeholder.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Placeholder', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Placeholder](https://getbootstrap.com/docs/5.2/components/placeholders/) 8 | 9 | Use loading placeholders for your components or pages to indicate something may still be loading. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Placeholder } from './examples/Placeholder/Placeholder'; 17 | export { default as Color } from './examples/Placeholder/Color'; 18 | export { default as Sizing } from './examples/Placeholder/Size'; 19 | export { default as Animation } from './examples/Placeholder/Animation'; 20 | export { default as Props } from './examples/Placeholder/Props'; 21 | -------------------------------------------------------------------------------- /stories/Popover.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Popover', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: 7 | '[Bootstrap Popovers](https://getbootstrap.com/docs/5.1/components/popovers/)', 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export { default as Popover } from './examples/Popover/Popover'; 14 | export { default as Focus } from './examples/Popover/Focus'; 15 | export { default as FourDirections } from './examples/Popover/Multi'; 16 | export { default as Uncontrolled } from './examples/Popover/Uncontrolled'; 17 | export { default as Update } from './examples/Popover/Update'; 18 | export { default as Props } from './examples/Popover/Props'; 19 | -------------------------------------------------------------------------------- /stories/Progress.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Progress', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: 7 | '[Bootstrap Progress](https://getbootstrap.com/docs/5.1/components/progress/)', 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export { default as Progress } from './examples/Progress/Progress'; 14 | export { default as Labels } from './examples/Progress/Labels'; 15 | export { default as Height } from './examples/Progress/Height'; 16 | export { default as Color } from './examples/Progress/Color'; 17 | export { default as Multi } from './examples/Progress/Multi'; 18 | export { default as Striped } from './examples/Progress/Striped'; 19 | export { default as Animated } from './examples/Progress/Animated'; 20 | export { default as Max } from './examples/Progress/Max'; 21 | export { default as Props } from './examples/Progress/Props'; 22 | -------------------------------------------------------------------------------- /stories/Spinner.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Spinner', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Spinners](https://getbootstrap.com/docs/5.1/components/spinners/) 8 | 9 | Indicate the loading state of a component or page with Spinners. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Spinner } from './examples/Spinner/Spinner'; 17 | export { default as Colors } from './examples/Spinner/Colors'; 18 | export { default as GrowingSpinner } from './examples/Spinner/Grower'; 19 | export { default as Alignment } from './examples/Spinner/Alignment'; 20 | export { default as Size } from './examples/Spinner/Size'; 21 | export { default as CustomSize } from './examples/Spinner/CustomSize'; 22 | export { default as Buttons } from './examples/Spinner/Button'; 23 | export { default as Props } from './examples/Spinner/Props'; 24 | -------------------------------------------------------------------------------- /stories/Table.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Table', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: 7 | '[Bootstrap Tables](https://getbootstrap.com/docs/5.1/content/tables/)', 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export { default as Table } from './examples/Table/Table'; 14 | export { default as Variants } from './examples/Table/Variants'; 15 | export { default as Striped } from './examples/Table/Striped'; 16 | export { default as HoverableRows } from './examples/Table/Hover'; 17 | export { default as Bordered } from './examples/Table/Bordered'; 18 | export { default as Borderless } from './examples/Table/Borderless'; 19 | export { default as SmallTable } from './examples/Table/Sizing'; 20 | export { default as Dark } from './examples/Table/Dark'; 21 | export { default as Responsive } from './examples/Table/Responsive'; 22 | export { default as Props } from './examples/Table/Props'; 23 | -------------------------------------------------------------------------------- /stories/Toast.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Toast', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: ` 7 | [Bootstrap Toasts](https://getbootstrap.com/docs/5.1/components/toasts/) 8 | 9 | Push notifications to your visitors with a Toast, a lightweight and easily customizable alert message. 10 | `, 11 | }, 12 | }, 13 | }, 14 | }; 15 | 16 | export { default as Toast } from './examples/Toast'; 17 | export { default as ToastDismiss } from './examples/ToastDismiss'; 18 | export { default as ToastHeaderIcon } from './examples/ToastHeaderIcon'; 19 | export { default as Props } from './examples/ToastProps'; 20 | -------------------------------------------------------------------------------- /stories/Tooltip.stories.js: -------------------------------------------------------------------------------- 1 | export default { 2 | title: 'Components/Tooltip', 3 | parameters: { 4 | docs: { 5 | description: { 6 | component: 7 | '[Bootstrap Tooltips](https://getbootstrap.com/docs/5.1/components/tooltips/)', 8 | }, 9 | }, 10 | }, 11 | }; 12 | 13 | export { default as Tooltip } from './examples/Tooltip/Tooltip'; 14 | export { default as Directions } from './examples/Tooltip/Directions'; 15 | export { default as AutoHide } from './examples/Tooltip/AutoHide'; 16 | export { default as Uncontrolled } from './examples/Tooltip/Uncontrolled'; 17 | export { default as Update } from './examples/Tooltip/Update'; 18 | export { default as Props } from './examples/Tooltip/Props'; 19 | -------------------------------------------------------------------------------- /stories/examples/Accordion/Accordion.js: -------------------------------------------------------------------------------- 1 | import Example from './AccordionExample'; 2 | // eslint-disable-next-line import/extensions 3 | import AccordionCode from '!!raw-loader!./AccordionExample'; 4 | 5 | export default Example; 6 | 7 | Example.parameters = { 8 | docs: { 9 | source: { 10 | code: AccordionCode, 11 | language: 'jsx', 12 | type: 'auto', 13 | }, 14 | }, 15 | }; 16 | -------------------------------------------------------------------------------- /stories/examples/Accordion/AccordionFlush.js: -------------------------------------------------------------------------------- 1 | import Example from './AccordionFlushExample'; 2 | // eslint-disable-next-line import/extensions 3 | import AccordionCode from '!!raw-loader!./AccordionFlushExample'; 4 | 5 | export default Example; 6 | 7 | Example.parameters = { 8 | docs: { 9 | description: { 10 | story: 11 | 'Add `flush` to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.', 12 | }, 13 | source: { 14 | code: AccordionCode, 15 | language: 'jsx', 16 | type: 'auto', 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /stories/examples/Accordion/AccordionProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Accordion, 4 | AccordionBody, 5 | AccordionHeader, 6 | AccordionItem, 7 | } from 'reactstrap'; 8 | import Props from '../Props'; 9 | 10 | function Example() { 11 | return ( 12 | 15 | ); 16 | } 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Alert/Alert.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ; 7 | } 8 | 9 | Example.args = { 10 | children: 'Hey! Pay attention.', 11 | color: 'primary', 12 | }; 13 | 14 | Example.argTypes = { 15 | color: { 16 | control: { type: 'select' }, 17 | options: colors, 18 | }, 19 | }; 20 | 21 | export default Example; 22 | -------------------------------------------------------------------------------- /stories/examples/Alert/Colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(props) { 6 | return ( 7 | <> 8 | {colors.map((color) => ( 9 | 10 | This is a primary alert — check it out! 11 | 12 | ))} 13 | 14 | ); 15 | } 16 | 17 | export default Example; 18 | -------------------------------------------------------------------------------- /stories/examples/Alert/Content.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 |

Well done!

8 |

9 | Aww yeah, you successfully read this important alert message. This 10 | example text is going to run a bit longer so that you can see how 11 | spacing within an alert works with this kind of content. 12 |

13 |
14 |

15 | Whenever you need to, be sure to use margin utilities to keep things 16 | nice and tidy. 17 |

18 | 19 | ); 20 | } 21 | 22 | export default Example; 23 | 24 | Example.parameters = { 25 | docs: { 26 | description: { 27 | story: 28 | 'Alerts can also contain additional HTML elements like headings, paragraphs and dividers.', 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /stories/examples/Alert/Dismiss.js: -------------------------------------------------------------------------------- 1 | import Example from './DismissExample'; 2 | // eslint-disable-next-line import/extensions 3 | import AlertDismiss from '!!raw-loader!./DismissExample'; 4 | 5 | export default Example; 6 | 7 | Example.parameters = { 8 | docs: { 9 | description: { 10 | story: 'Alerts can also be dismissed.', 11 | }, 12 | source: { 13 | code: AlertDismiss, 14 | language: 'jsx', 15 | type: 'auto', 16 | }, 17 | }, 18 | }; 19 | -------------------------------------------------------------------------------- /stories/examples/Alert/DismissExample.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | 4 | function AlertExample(props) { 5 | const [visible, setVisible] = useState(true); 6 | 7 | const onDismiss = () => setVisible(false); 8 | 9 | return ( 10 | 11 | I am an alert and I can be dismissed! 12 | 13 | ); 14 | } 15 | 16 | export default AlertExample; 17 | -------------------------------------------------------------------------------- /stories/examples/Alert/Fadeless.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { UncontrolledAlert } from 'reactstrap'; 3 | import Alert from '../../../src/Alert'; 4 | 5 | export function AlertFadelessExample(props) { 6 | const [visible, setVisible] = useState(true); 7 | 8 | const onDismiss = () => setVisible(false); 9 | 10 | return ( 11 |
12 | 13 | I am a primary alert and I can be dismissed without animating! 14 | 15 |
16 | ); 17 | } 18 | 19 | export function UncontrolledAlertFadelessExample() { 20 | return ( 21 |
22 | 23 | I am an alert and I can be dismissed without animating! 24 | 25 |
26 | ); 27 | } 28 | -------------------------------------------------------------------------------- /stories/examples/Alert/Link.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(props) { 6 | return ( 7 | <> 8 | {colors.map((color) => ( 9 | 10 | This is a primary alert with{' '} 11 | 17 | an example link 18 | 19 | . Give it a click if you like. 20 | 21 | ))} 22 | 23 | ); 24 | } 25 | 26 | export default Example; 27 | 28 | Example.parameters = { 29 | docs: { 30 | description: { 31 | story: 'Alerts get a matching link color.', 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /stories/examples/Alert/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Alert } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Alert/UncontrolledDismiss.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UncontrolledAlert } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | I am an alert and I can be dismissed! 8 | 9 | ); 10 | } 11 | 12 | export default Example; 13 | 14 | Example.parameters = { 15 | docs: { 16 | description: { 17 | story: 18 | 'And if you are not a fan of using state, you can always use `UncontrolledAlert`.', 19 | }, 20 | }, 21 | }; 22 | -------------------------------------------------------------------------------- /stories/examples/Badge/Badge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ; 7 | } 8 | 9 | Example.args = { 10 | children: 'New', 11 | color: 'primary', 12 | pill: false, 13 | }; 14 | 15 | Example.argTypes = { 16 | color: { 17 | control: { type: 'select' }, 18 | options: colors, 19 | }, 20 | }; 21 | 22 | export default Example; 23 | -------------------------------------------------------------------------------- /stories/examples/Badge/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge, Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 10 |
11 | ); 12 | } 13 | 14 | export default Example; 15 | 16 | Example.parameters = { 17 | docs: { 18 | description: { 19 | story: 20 | 'Badges can be used as part of links or buttons to provide a counter.', 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /stories/examples/Badge/Headings.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | <> 7 |

8 | Example Heading New 9 |

10 |

11 | Example Heading New 12 |

13 |

14 | Example Heading New 15 |

16 |

17 | Example Heading New 18 |

19 |
20 | Example Heading New 21 |
22 |
23 | Example Heading New 24 |
25 | 26 | ); 27 | } 28 | 29 | export default Example; 30 | 31 | Example.parameters = { 32 | docs: { 33 | description: { 34 | story: 35 | 'Badges scale to match the size of the immediate parent element by using relative font sizing and em units. ', 36 | }, 37 | }, 38 | }; 39 | -------------------------------------------------------------------------------- /stories/examples/Badge/Links.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 8 | Primary 9 | 10 | 11 | Secondary 12 | 13 | 14 | Success 15 | 16 | 17 | Danger 18 | 19 | 20 | Warning 21 | 22 | 23 | Info 24 | 25 | 26 | Light 27 | 28 | 29 | Dark 30 | 31 |
32 | ); 33 | } 34 | 35 | export default Example; 36 | -------------------------------------------------------------------------------- /stories/examples/Badge/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Badge/Variations.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Badge } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | Primary 8 | Secondary 9 | Success 10 | Danger 11 | Warning 12 | Info 13 | 14 | Light 15 | 16 | Dark 17 |
18 | ); 19 | } 20 | 21 | export default Example; 22 | 23 | Example.parameters = { 24 | docs: { 25 | description: { 26 | story: 27 | 'Change `color` prop to quickly change the appearance of a badge. You can add `text-dark` class name to get darker text for light backgrounds.', 28 | }, 29 | }, 30 | }; 31 | -------------------------------------------------------------------------------- /stories/examples/Breadcrump/NoList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | Home 9 | 10 | 11 | Library 12 | 13 | 14 | Data 15 | 16 | 17 | Bootstrap 18 | 19 | 20 | ); 21 | } 22 | 23 | export default Example; 24 | -------------------------------------------------------------------------------- /stories/examples/Breadcrump/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Breadcrumb, BreadcrumbItem } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ( 7 |
8 |
10 | ); 11 | } 12 | 13 | Example.args = { 14 | children: 'Click Me', 15 | color: 'primary', 16 | outline: false, 17 | size: undefined, 18 | block: false, 19 | active: false, 20 | close: false, 21 | }; 22 | 23 | Example.argTypes = { 24 | color: { 25 | control: { type: 'select' }, 26 | options: colors, 27 | }, 28 | size: { 29 | control: { type: 'select' }, 30 | options: ['', 'sm', 'lg'], 31 | }, 32 | }; 33 | 34 | export default Example; 35 | -------------------------------------------------------------------------------- /stories/examples/Button/Colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | {' '} 8 | {' '} 9 | {' '} 10 | {' '} 11 | {' '} 12 | 13 |
14 | ); 15 | } 16 | 17 | export default Example; 18 | 19 | Example.parameters = { 20 | docs: { 21 | description: { 22 | story: 23 | 'There are several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.', 24 | }, 25 | }, 26 | }; 27 | -------------------------------------------------------------------------------- /stories/examples/Button/Disabled.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | {' '} 10 |
11 | ); 12 | } 13 | 14 | export default Example; 15 | 16 | Example.parameters = { 17 | docs: { 18 | description: { 19 | story: 20 | 'Make buttons look inactive by adding the disabled prop to `Button`. Disabled buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.', 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /stories/examples/Button/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Button/Size.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | {' '} 10 | {' '} 11 | {' '} 14 |
15 | ); 16 | } 17 | 18 | export default Example; 19 | 20 | Example.parameters = { 21 | docs: { 22 | description: { 23 | story: 24 | 'Fancy larger or smaller buttons? Add `size` prop with `lg` or `sm` values to make button bigger or smaller.', 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /stories/examples/Button/Tags.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | {' '} 10 |
13 | ); 14 | } 15 | 16 | export default Example; 17 | 18 | Example.parameters = { 19 | docs: { 20 | description: { 21 | story: 22 | 'The button classes are designed to be used with the ` 18 | 19 | 20 | Header 21 | Action 22 | Another Action 23 | 24 | Another Action 25 | 26 | 27 | ); 28 | } 29 | 30 | export default Example; 31 | -------------------------------------------------------------------------------- /stories/examples/ButtonDropdownUncontrolled.js: -------------------------------------------------------------------------------- 1 | /* eslint react/no-multi-comp: 0, react/prop-types: 0 */ 2 | import React from 'react'; 3 | import { 4 | UncontrolledButtonDropdown, 5 | DropdownMenu, 6 | DropdownItem, 7 | DropdownToggle, 8 | } from 'reactstrap'; 9 | 10 | function Example(props) { 11 | return ( 12 | 13 | Dropdown 14 | 15 | Header 16 | Action 17 | Another Action 18 | 19 | Another Action 20 | 21 | 22 | ); 23 | } 24 | 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/ButtonCloseIcon.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 |
9 | ); 10 | } 11 | 12 | export default Example; 13 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/ButtonGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, ButtonGroup } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default Example; 15 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/MixedStyles.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, ButtonGroup } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default Example; 15 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ButtonGroup, ButtonToolbar } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/Stateful.js: -------------------------------------------------------------------------------- 1 | import Example from './StatefulExample'; 2 | // eslint-disable-next-line import/extensions 3 | import ButtonStateful from '!!raw-loader!./StatefulExample'; 4 | 5 | export default Example; 6 | 7 | Example.parameters = { 8 | docs: { 9 | description: { 10 | story: 11 | 'Combine button-like checkbox and radio toggle buttons into a seamless looking button group.', 12 | }, 13 | source: { 14 | code: ButtonStateful, 15 | language: 'jsx', 16 | type: 'auto', 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /stories/examples/ButtonGroup/Vertical.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, ButtonGroup } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | 9 | 10 | 11 | ); 12 | } 13 | 14 | export default Example; 15 | 16 | Example.parameters = { 17 | docs: { 18 | description: { 19 | story: 20 | 'Make a set of buttons appear vertically stacked rather than horizontally. **Split button dropdowns are not supported here.**', 21 | }, 22 | }, 23 | }; 24 | -------------------------------------------------------------------------------- /stories/examples/Card/Body.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, CardText, CardBody, CardTitle, CardSubtitle } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 7 | 8 | Card Title 9 | 10 | Card subtitle 11 | 12 | This is some text within a card body. 13 | 14 | 15 | ); 16 | } 17 | 18 | export default Example; 19 | 20 | Example.parameters = { 21 | docs: { 22 | description: { 23 | story: 24 | 'The building block of a card is the `CardBody` Use it whenever you need a padded section within a card.', 25 | }, 26 | }, 27 | }; 28 | -------------------------------------------------------------------------------- /stories/examples/Card/HeaderFooter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Card, 4 | Button, 5 | CardHeader, 6 | CardFooter, 7 | CardBody, 8 | CardTitle, 9 | CardText, 10 | } from 'reactstrap'; 11 | 12 | function Example(props) { 13 | return ( 14 | 15 | Header 16 | 17 | Special Title Treatment 18 | 19 | With supporting text below as a natural lead-in to additional content. 20 | 21 | 22 | 23 | Footer 24 | 25 | ); 26 | } 27 | 28 | export default Example; 29 | 30 | Example.parameters = { 31 | docs: { 32 | description: { 33 | story: 'Add an optional header and/or footer within a card.', 34 | }, 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /stories/examples/Card/ListGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Card, CardHeader, ListGroup, ListGroupItem } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 7 | Featured 8 | 9 | An item 10 | A second item 11 | And a third item 12 | 13 | 14 | ); 15 | } 16 | 17 | export default Example; 18 | 19 | Example.parameters = { 20 | docs: { 21 | description: { 22 | story: 'Create lists of content in a card with a flush list group.', 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /stories/examples/Card/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Card, 4 | CardBody, 5 | CardHeader, 6 | CardImg, 7 | CardSubtitle, 8 | CardTitle, 9 | CardFooter, 10 | CardText, 11 | } from 'reactstrap'; 12 | import Props from '../Props'; 13 | 14 | function Example() { 15 | return ( 16 | 28 | ); 29 | } 30 | 31 | export default Example; 32 | -------------------------------------------------------------------------------- /stories/examples/Carousel/Carousel.js: -------------------------------------------------------------------------------- 1 | import Example from './CarouselExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CarouselExample from '!!raw-loader!./CarouselExample'; 4 | 5 | Example.args = { 6 | dark: false, 7 | slide: true, 8 | fade: false, 9 | }; 10 | 11 | Example.parameters = { 12 | docs: { 13 | source: { 14 | code: CarouselExample, 15 | language: 'jsx', 16 | type: 'auto', 17 | }, 18 | }, 19 | }; 20 | 21 | export default Example; 22 | -------------------------------------------------------------------------------- /stories/examples/Carousel/CustomTag.js: -------------------------------------------------------------------------------- 1 | import Example from './CustomTagExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CarouselCustomTagExample from '!!raw-loader!./CustomTagExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: CarouselCustomTagExample, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | }, 13 | }; 14 | 15 | export default Example; 16 | -------------------------------------------------------------------------------- /stories/examples/Carousel/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Carousel, 4 | CarouselItem, 5 | CarouselControl, 6 | CarouselIndicators, 7 | CarouselCaption, 8 | } from 'reactstrap'; 9 | import Props from '../Props'; 10 | 11 | function Example() { 12 | return ( 13 | 22 | ); 23 | } 24 | 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/Carousel/Uncontrolled.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { UncontrolledCarousel } from 'reactstrap'; 3 | 4 | const items = [ 5 | { 6 | src: 'https://picsum.photos/id/123/1200/600', 7 | altText: 'Slide 1', 8 | caption: 'Slide 1', 9 | key: 1, 10 | }, 11 | { 12 | src: 'https://picsum.photos/id/456/1200/600', 13 | altText: 'Slide 2', 14 | caption: 'Slide 2', 15 | key: 2, 16 | }, 17 | { 18 | src: 'https://picsum.photos/id/678/1200/600', 19 | altText: 'Slide 3', 20 | caption: 'Slide 3', 21 | key: 3, 22 | }, 23 | ]; 24 | 25 | function Example(props) { 26 | return ; 27 | } 28 | 29 | export default Example; 30 | -------------------------------------------------------------------------------- /stories/examples/Clearfix.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Example(props) { 4 | return ( 5 |
6 | 9 | 12 |
13 | ); 14 | } 15 | 16 | export default Example; 17 | -------------------------------------------------------------------------------- /stories/examples/CloseButton/CloseButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CloseButton } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ; 6 | } 7 | 8 | Example.args = { 9 | disabled: false, 10 | }; 11 | 12 | export default Example; 13 | -------------------------------------------------------------------------------- /stories/examples/CloseButton/Disabled.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CloseButton } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ; 6 | } 7 | export default Example; 8 | 9 | Example.parameters = { 10 | docs: { 11 | description: { 12 | story: 13 | 'Disabled close buttons change their opacity. Italso applied `pointer-events: none` and `user-select: none` to preventing hover and active states from triggering.', 14 | }, 15 | }, 16 | }; 17 | -------------------------------------------------------------------------------- /stories/examples/CloseButton/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CloseButton } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/CloseButton/White.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CloseButton } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | Example.parameters = { 13 | docs: { 14 | description: { 15 | story: 16 | 'Change the default `ButtonClose` to be white with the `variant` prop. ', 17 | }, 18 | }, 19 | }; 20 | 21 | export default Example; 22 | -------------------------------------------------------------------------------- /stories/examples/Collapse/Collapse.js: -------------------------------------------------------------------------------- 1 | import Example from './CollapseExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CollapseExample from '!!raw-loader!./CollapseExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: CollapseExample, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | }, 13 | }; 14 | 15 | Example.args = { 16 | horizontal: false, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Collapse/CollapseExample.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Collapse, Button, CardBody, Card } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | const [isOpen, setIsOpen] = useState(false); 6 | 7 | const toggle = () => setIsOpen(!isOpen); 8 | 9 | return ( 10 | 11 | 14 | 15 | 16 | 17 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 18 | terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer 19 | labore wes anderson cred nesciunt sapiente ea proident. 20 | 21 | 22 | 23 | 24 | ); 25 | } 26 | 27 | export default Example; 28 | -------------------------------------------------------------------------------- /stories/examples/Collapse/Events.js: -------------------------------------------------------------------------------- 1 | import Example from './EventsExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CollapseEvents from '!!raw-loader!./EventsExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: CollapseEvents, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Track events as they happen.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Collapse/Horizontal.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Alert, Collapse, Button } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | const [isOpen, setIsOpen] = useState(false); 6 | 7 | const toggle = () => setIsOpen(!isOpen); 8 | 9 | return ( 10 |
11 | 14 | 15 | 16 | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 17 | terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer 18 | labore wes anderson cred nesciunt sapiente ea proident. 19 | 20 | 21 |
22 | ); 23 | } 24 | 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/Collapse/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Collapse, UncontrolledCollapse } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/ContainerResponsive.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Container } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | <> 7 | .container 8 | 9 | .container-sm 10 | 11 | 12 | .container-md 13 | 14 | 15 | .container-lg 16 | 17 | 18 | .container-xl 19 | 20 | 21 | .container-fluid 22 | 23 | 24 | ); 25 | } 26 | 27 | export default Example; 28 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/Custom.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Dropdown, DropdownMenu, DropdownToggle } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | const [dropdownOpen, setDropdownOpen] = useState(false); 6 | 7 | const toggle = () => setDropdownOpen((prevState) => !prevState); 8 | 9 | return ( 10 | 11 | 16 | Custom Dropdown Content 17 | 18 | 19 |
Custom dropdown item
20 |
Custom dropdown item
21 |
Custom dropdown item
22 |
Custom dropdown item
23 | 24 | 25 | ); 26 | } 27 | 28 | export default Example; 29 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/Dropdown.js: -------------------------------------------------------------------------------- 1 | import Example from './DropdownExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Dropdown from '!!raw-loader!./DropdownExample'; 4 | 5 | export default Example; 6 | 7 | Example.parameters = { 8 | docs: { 9 | source: { 10 | code: Dropdown, 11 | language: 'jsx', 12 | type: 'auto', 13 | }, 14 | }, 15 | }; 16 | 17 | Example.args = { 18 | dark: false, 19 | end: false, 20 | flip: false, 21 | }; 22 | 23 | Example.argTypes = { 24 | direction: { 25 | control: { type: 'select' }, 26 | options: ['up', 'down', 'start', 'end'], 27 | }, 28 | }; 29 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Dropdown, 4 | DropdownToggle, 5 | DropdownMenu, 6 | DropdownItem, 7 | } from 'reactstrap'; 8 | import Props from '../Props'; 9 | 10 | function Example() { 11 | return ( 12 | 15 | ); 16 | } 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/Sizing.js: -------------------------------------------------------------------------------- 1 | import Example from './SizingExample'; 2 | // eslint-disable-next-line import/extensions 3 | import DropdownSizing from '!!raw-loader!./SizingExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: DropdownSizing, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 14 | 'Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/SizingExample.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | Dropdown, 4 | DropdownToggle, 5 | DropdownMenu, 6 | DropdownItem, 7 | } from 'reactstrap'; 8 | 9 | function Example(props) { 10 | const [dropdownOpen, setDropdownOpen] = useState(false); 11 | const toggle = () => setDropdownOpen((prevState) => !prevState); 12 | 13 | return ( 14 | 15 | 16 | Large Button 17 | 18 | 19 | Header 20 | Action 21 | 22 | 23 | ); 24 | } 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/Dropdown/Uncontrolled.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | UncontrolledDropdown, 4 | DropdownToggle, 5 | DropdownMenu, 6 | DropdownItem, 7 | } from 'reactstrap'; 8 | 9 | export default function Example() { 10 | return ( 11 | 12 | Dropdown 13 | 14 | Header 15 | Action 16 | Another Action 17 | 18 | Another Action 19 | 20 | 21 | ); 22 | } 23 | 24 | Example.parameters = { 25 | docs: { 26 | description: { 27 | story: 28 | 'And if you are not a fan of using `state`, feel free to use the `UncontrolledDropdown`.', 29 | }, 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /stories/examples/Fade.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Button, Fade } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | const [fadeIn, setFadeIn] = useState(true); 6 | 7 | const toggle = () => setFadeIn(!fadeIn); 8 | 9 | return ( 10 |
11 | 14 | 15 | This content will fade in and out as the button is pressed 16 | 17 |
18 | ); 19 | } 20 | 21 | export default Example; 22 | -------------------------------------------------------------------------------- /stories/examples/FadeProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Fade } from 'reactstrap'; 3 | import Props from './Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Form/FormProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Form, FormGroup, Label, Input, FormText } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Form/InlineCheckboxes.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Form, FormGroup, Label, Input } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | ); 17 | } 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Form/InputSizing.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Form, Input } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | ); 21 | } 22 | 23 | export default Example; 24 | -------------------------------------------------------------------------------- /stories/examples/Form/LabelHidden.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Form, FormGroup, Label, Input } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 8 | 11 | 17 | {' '} 18 | 19 | 22 | 28 | {' '} 29 | 30 |
31 | ); 32 | } 33 | 34 | export default Example; 35 | -------------------------------------------------------------------------------- /stories/examples/Form/Switches.js: -------------------------------------------------------------------------------- 1 | import Example from './SwitchesExample'; 2 | // eslint-disable-next-line import/extensions 3 | import SwitchesExample from '!!raw-loader!./SwitchesExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: SwitchesExample, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 14 | 'A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.', 15 | }, 16 | }, 17 | }; 18 | 19 | Example.args = { 20 | horizontal: false, 21 | }; 22 | 23 | export default Example; 24 | -------------------------------------------------------------------------------- /stories/examples/InputGroup/ButtonShorthand.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputGroup, Button, Input } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 |
7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 |
23 | ); 24 | } 25 | 26 | export default Example; 27 | -------------------------------------------------------------------------------- /stories/examples/InputGroup/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InputGroup, InputGroupText } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/LayoutProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Container, Row, Col } from 'reactstrap'; 3 | import Props from './Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/List/Inline.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { List, ListInlineItem } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | Lorem ipsum 8 | Phasellus iaculis 9 | Nulla volutpat 10 | 11 | ); 12 | } 13 | 14 | export default Example; 15 | 16 | Example.parameters = { 17 | docs: { 18 | description: { 19 | story: 'Remove a list’s bullets and apply some light margin', 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /stories/examples/List/List.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { List } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 |
  • Lorem ipsum
    • 8 |
  • Phasellus iaculis
    • 9 |
  • Nulla volutpat
    • 10 |     11 | ); 12 | } 13 | 14 | export default Example; 15 | -------------------------------------------------------------------------------- /stories/examples/List/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { List, ListInlineItem } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/ListGroup/Active.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup, ListGroupItem } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ); 14 | } 15 | 16 | Example.parameters = { 17 | docs: { 18 | description: { 19 | story: 20 | 'Add `active` prop to a `ListGroupItem` to indicate the current active selection.', 21 | }, 22 | }, 23 | }; 24 | 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/ListGroup/Badge.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup, ListGroupItem, Badge } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | Cras justo odio 14 9 | 10 | 11 | Dapibus ac facilisis in 2 12 | 13 | 14 | Morbi leo risus 1 15 | 16 | 17 | ); 18 | } 19 | 20 | Example.parameters = { 21 | docs: { 22 | description: { 23 | story: 24 | 'Add badges to any list group item to show unread counts, activity, and more.', 25 | }, 26 | }, 27 | }; 28 | 29 | export default Example; 30 | -------------------------------------------------------------------------------- /stories/examples/ListGroup/ContextualClasses.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup, ListGroupItem } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | 12 | ); 13 | } 14 | 15 | Example.parameters = { 16 | docs: { 17 | description: { 18 | story: 19 | 'Use contextual classes to style list items with a stateful background and color.', 20 | }, 21 | }, 22 | }; 23 | 24 | export default Example; 25 | -------------------------------------------------------------------------------- /stories/examples/ListGroup/ListGroup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListGroup, ListGroupItem } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 7 | Cras justo odio 8 | Dapibus ac facilisis in 9 | Morbi leo risus 10 | Porta ac consectetur ac 11 | Vestibulum at eros 12 | 13 | ); 14 | } 15 | 16 | Example.args = { 17 | flush: false, 18 | horizontal: false, 19 | numbered: false, 20 | }; 21 | 22 | export default Example; 23 | -------------------------------------------------------------------------------- /stories/examples/ListGroup/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | ListGroup, 4 | ListGroupItem, 5 | ListGroupItemHeading, 6 | ListGroupItemText, 7 | } from 'reactstrap'; 8 | import Props from '../Props'; 9 | 10 | function Example() { 11 | return ( 12 | 20 | ); 21 | } 22 | 23 | export default Example; 24 | -------------------------------------------------------------------------------- /stories/examples/Media.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Media } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 7 | 8 | 13 | 14 | 15 | Media heading 16 | Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 17 | ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, 18 | tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate 19 | fringilla. Donec lacinia congue felis in faucibus. 20 | 21 | 22 | ); 23 | } 24 | 25 | export default Example; 26 | -------------------------------------------------------------------------------- /stories/examples/Modal/Backdrop.js: -------------------------------------------------------------------------------- 1 | import Example from './BackdropExample'; 2 | // eslint-disable-next-line import/extensions 3 | import BackdropExample from '!!raw-loader!./BackdropExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | description: { 8 | story: 9 | 'When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.', 10 | }, 11 | source: { 12 | code: BackdropExample, 13 | language: 'jsx', 14 | type: 'auto', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Modal/CustomCloseButton.js: -------------------------------------------------------------------------------- 1 | import Example from './CustomCloseButtonExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CustomCloseButton from '!!raw-loader!./CustomCloseButtonExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: CustomCloseButton, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Add a custom close button to the Modal.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/CustomTimeout.js: -------------------------------------------------------------------------------- 1 | import Example from './CustomTimeoutExample'; 2 | // eslint-disable-next-line import/extensions 3 | import CustomTimeout from '!!raw-loader!./CustomTimeoutExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: CustomTimeout, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Add a custom timeout to the Modal.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/Destructuring.js: -------------------------------------------------------------------------------- 1 | import Example from './DestructuringExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Destructuring from '!!raw-loader!./DestructuringExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: Destructuring, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Unmount modal on closing using the `unmountOnClose` prop.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/External.js: -------------------------------------------------------------------------------- 1 | import Example from './ExternalExample'; 2 | // eslint-disable-next-line import/extensions 3 | import External from '!!raw-loader!./ExternalExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: External, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 14 | 'Move the close button to the outside of the `Modal` using `external` prop.', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Modal/Fadeless.js: -------------------------------------------------------------------------------- 1 | import Example from './FadelessExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Fadeless from '!!raw-loader!./FadelessExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: Fadeless, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Disable fade animation with `fade={false}` prop.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/FocusAfterClose.js: -------------------------------------------------------------------------------- 1 | import Example from './FocusAfterCloseExample'; 2 | // eslint-disable-next-line import/extensions 3 | import FocusAfterClose from '!!raw-loader!./FocusAfterCloseExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: FocusAfterClose, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 14 | 'The "Open" button will be focused after close when `returnFocusAfterClose` is true and will not be focused if `returnFocusAfterClose` is false.', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Modal/Fullscreen.js: -------------------------------------------------------------------------------- 1 | import Example from './FullscreenExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Fullscreen from '!!raw-loader!./FullscreenExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: Fullscreen, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Make the modal fullscreen.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/Modal.js: -------------------------------------------------------------------------------- 1 | /* eslint react/no-multi-comp: 0, react/prop-types: 0 */ 2 | import Example from './ModalExample'; 3 | // eslint-disable-next-line import/extensions 4 | import ModalExample from '!!raw-loader!./ModalExample'; 5 | 6 | Example.parameters = { 7 | docs: { 8 | source: { 9 | code: ModalExample, 10 | language: 'jsx', 11 | type: 'auto', 12 | }, 13 | }, 14 | }; 15 | 16 | Example.args = { 17 | fullscreen: false, 18 | size: undefined, 19 | backdrop: true, 20 | fade: true, 21 | centered: false, 22 | scrollable: false, 23 | }; 24 | 25 | Example.argTypes = { 26 | fullscreen: { 27 | control: { type: 'select' }, 28 | options: ['', true, 'sm', 'md', 'lg', 'xl'], 29 | }, 30 | size: { 31 | control: { type: 'select' }, 32 | options: ['', 'sm', 'lg', 'xl'], 33 | }, 34 | }; 35 | 36 | export default Example; 37 | -------------------------------------------------------------------------------- /stories/examples/Modal/Nested.js: -------------------------------------------------------------------------------- 1 | import Example from './NestedExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Nested from '!!raw-loader!./NestedExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: Nested, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Nest modals by putting a modal inside another.', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Modal/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Nav/Navs.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Nav, NavItem, NavLink } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 21 | ); 22 | } 23 | 24 | Example.args = { 25 | tabs: false, 26 | pills: false, 27 | vertical: false, 28 | justified: false, 29 | fill: false, 30 | card: false, 31 | }; 32 | 33 | export default Example; 34 | -------------------------------------------------------------------------------- /stories/examples/Nav/Pills.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Nav, NavItem, NavLink } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 24 | ); 25 | } 26 | 27 | export default Example; 28 | 29 | Example.parameters = { 30 | docs: { 31 | description: { 32 | story: 'Take the same component and add `pills` prop.', 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /stories/examples/Nav/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Nav, NavItem, NavLink } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Nav/Tabs.js: -------------------------------------------------------------------------------- 1 | import Example from './TabsExample'; 2 | // eslint-disable-next-line import/extensions 3 | import TabsExample from '!!raw-loader!./TabsExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | description: { 8 | story: 9 | 'Takes the basic Nav from above and adds the `tabs` prop to generate a tabbed interface.', 10 | }, 11 | source: { 12 | code: TabsExample, 13 | language: 'jsx', 14 | type: 'auto', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Nav/Vertical.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Nav, NavItem, NavLink } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | 22 | ); 23 | } 24 | 25 | export default Example; 26 | 27 | Example.parameters = { 28 | docs: { 29 | description: { 30 | story: 31 | 'Stack your navigation by changing the flex item direction with the `vertical` prop. Need to stack them on some viewports but not others? Use the responsive versions `vertical="sm"`.', 32 | }, 33 | }, 34 | }; 35 | -------------------------------------------------------------------------------- /stories/examples/Navbar/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navbar, NavbarToggler, NavbarBrand, NavbarText } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ( 7 | 8 | ); 9 | } 10 | 11 | export default Example; 12 | -------------------------------------------------------------------------------- /stories/examples/Navbar/Toggler.js: -------------------------------------------------------------------------------- 1 | import Example from './TogglerExample'; 2 | // eslint-disable-next-line import/extensions 3 | import TogglerExample from '!!raw-loader!./TogglerExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | description: { 8 | story: 9 | 'Navbar togglers help toggle navbar in case there is not enough space.', 10 | }, 11 | source: { 12 | code: TogglerExample, 13 | language: 'jsx', 14 | type: 'auto', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/OffcanvasProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap'; 3 | import Props from './Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Pagination/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Pagination, PaginationItem, PaginationLink } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Placeholder/Animation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Placeholder } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | } 16 | 17 | export default Example; 18 | 19 | Example.parameters = { 20 | docs: { 21 | description: { 22 | story: 'Use `wave` or `glow` animation using the `animation` prop.', 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /stories/examples/Placeholder/Color.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Placeholder } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ); 19 | } 20 | 21 | export default Example; 22 | 23 | Example.parameters = { 24 | docs: { 25 | description: { 26 | story: 'Add custom color with `color` prop.', 27 | }, 28 | }, 29 | }; 30 | -------------------------------------------------------------------------------- /stories/examples/Placeholder/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Placeholder } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Placeholder/Size.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Placeholder } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | } 14 | 15 | export default Example; 16 | 17 | Example.parameters = { 18 | docs: { 19 | description: { 20 | story: 21 | 'Want your placeholder bigger or smaller Add `size` prop with `lg`, `sm` or `xs`.', 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /stories/examples/Popover/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Popover, PopoverHeader, PopoverBody } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Progress/Color.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Progress } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | } 15 | 16 | export default Example; 17 | 18 | Example.parameters = { 19 | docs: { 20 | description: { 21 | story: 22 | 'Pass color prop to change the appearance of individual progress bars.', 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /stories/examples/Progress/Height.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Progress } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default Example; 14 | 15 | Example.parameters = { 16 | docs: { 17 | description: { 18 | story: 19 | 'Change style `height` and `Progress` will automatically resize accordingly.', 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /stories/examples/Progress/Progress.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Progress } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ; 7 | } 8 | 9 | Example.args = { 10 | value: 50, 11 | animated: false, 12 | striped: false, 13 | }; 14 | 15 | Example.argTypes = { 16 | color: { 17 | control: { type: 'select' }, 18 | options: colors, 19 | }, 20 | value: { 21 | control: { 22 | type: 'range', 23 | min: 0, 24 | max: 100, 25 | }, 26 | }, 27 | }; 28 | 29 | export default Example; 30 | -------------------------------------------------------------------------------- /stories/examples/Progress/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Progress } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ArgsTable } from '@storybook/addon-docs'; 3 | import PropTypes from 'prop-types'; 4 | 5 | function Info({ component }) { 6 | return ( 7 |
    8 |
    {component.name}
    9 | 10 |
    11 | ); 12 | } 13 | 14 | function Props({ component, components = [] }) { 15 | return ( 16 |
    17 | {component ? : undefined} 18 | {components.map((c) => ( 19 | 20 | ))} 21 |
    22 | ); 23 | } 24 | 25 | Info.propTypes = { 26 | component: PropTypes.elementType, 27 | }; 28 | 29 | Props.propTypes = { 30 | component: PropTypes.elementType, 31 | components: PropTypes.arrayOf(PropTypes.elementType), 32 | }; 33 | 34 | export default Props; 35 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Alignment.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ; 6 | } 7 | 8 | export default Example; 9 | 10 | Example.parameters = { 11 | docs: { 12 | description: { 13 | story: 14 | 'Spinners in Bootstrap are built with rems, currentColor, and display: inline-flex. ' + 15 | 'This means they can easily be resized, recolored, and quickly aligned. ' + 16 | '\n\n Use margin utilities like `.m-5` for easy spacing', 17 | }, 18 | }, 19 | }; 20 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner, Button } from 'reactstrap'; 3 | 4 | function Example(args) { 5 | return ( 6 | 10 | ); 11 | } 12 | 13 | export default Example; 14 | 15 | Example.parameters = { 16 | docs: { 17 | description: { 18 | story: 19 | 'Use spinners within buttons to indicate an action is currently processing or taking place. You may also swap the text out of the spinner element and utilize button text as needed.', 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Colors.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ( 7 | <> 8 | {colors.map((color) => ( 9 | 10 | ))} 11 | 12 | ); 13 | } 14 | 15 | export default Example; 16 | 17 | Example.parameters = { 18 | docs: { 19 | description: { 20 | story: 21 | 'All standard visual variant colors can be applied for the spinner.', 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /stories/examples/Spinner/CustomSize.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | <> 7 | 8 | 13 | 14 | ); 15 | } 16 | 17 | export default Example; 18 | 19 | Example.parameters = { 20 | docs: { 21 | description: { 22 | story: 'Or use custom css as needed', 23 | }, 24 | }, 25 | }; 26 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Grower.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(props) { 6 | return ( 7 | <> 8 | {colors.map((color) => ( 9 | 10 | ))} 11 | 12 | ); 13 | } 14 | 15 | export default Example; 16 | 17 | Example.parameters = { 18 | docs: { 19 | description: { 20 | story: 21 | 'If you don’t fancy a border spinner, switch to the grow spinner. While it doesn’t technically spin, it does repeatedly grow! Once again you can apply all the colors as above.', 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Size.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | return ( 6 | <> 7 | 8 | 9 | 10 | ); 11 | } 12 | 13 | export default Example; 14 | 15 | Example.parameters = { 16 | docs: { 17 | description: { 18 | story: 19 | 'Add `size="sm` to make a smaller spinner that can quickly be used within other components.', 20 | }, 21 | }, 22 | }; 23 | -------------------------------------------------------------------------------- /stories/examples/Spinner/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Spinner } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ; 7 | } 8 | 9 | Example.args = { 10 | type: 'border', 11 | }; 12 | 13 | Example.argTypes = { 14 | type: { 15 | control: { type: 'select' }, 16 | options: ['border', 'grow'], 17 | }, 18 | color: { 19 | control: { type: 'select' }, 20 | options: colors, 21 | }, 22 | size: { 23 | control: { type: 'select' }, 24 | options: ['', 'sm'], 25 | }, 26 | }; 27 | export default Example; 28 | -------------------------------------------------------------------------------- /stories/examples/Table/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Table } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Table/Variants.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Table } from 'reactstrap'; 3 | import { colors } from '../options'; 4 | 5 | function Example(args) { 6 | return ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | {colors.map((color) => ( 17 | 18 | 19 | 20 | 21 | 22 | ))} 23 | 24 |
    ClassHeadingHeading
    {color}CellCell
    25 | ); 26 | } 27 | 28 | export default Example; 29 | 30 | Example.parameters = { 31 | docs: { 32 | description: { 33 | story: 34 | 'Use contextual classes to color tables, table rows or individual cells.', 35 | }, 36 | }, 37 | }; 38 | -------------------------------------------------------------------------------- /stories/examples/ToastProps.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Toast, ToastBody, ToastHeader } from 'reactstrap'; 3 | import Props from './Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/AutoHide.js: -------------------------------------------------------------------------------- 1 | import Example from './AutoHideExample'; 2 | // eslint-disable-next-line import/extensions 3 | import AutoHide from '!!raw-loader!./AutoHideExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: AutoHide, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 'Disable `autohide` to allow users to select text inside tooltip', 14 | }, 15 | }, 16 | }; 17 | 18 | export default Example; 19 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/AutoHideExample.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { Tooltip } from 'reactstrap'; 3 | 4 | function Example(props) { 5 | const [tooltipOpen, setTooltipOpen] = useState(false); 6 | 7 | const toggle = () => setTooltipOpen(!tooltipOpen); 8 | 9 | return ( 10 |
    11 |

    12 | Sometimes you need to allow users to select text within a{' '} 13 | 18 | tooltip 19 | 20 | . 21 |

    22 | 29 | Try to select this text! 30 | 31 |
    32 | ); 33 | } 34 | 35 | export default Example; 36 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/Directions.js: -------------------------------------------------------------------------------- 1 | import Example from './DirectionsExample'; 2 | // eslint-disable-next-line import/extensions 3 | import Directions from '!!raw-loader!./DirectionsExample'; 4 | 5 | Example.parameters = { 6 | docs: { 7 | source: { 8 | code: Directions, 9 | language: 'jsx', 10 | type: 'auto', 11 | }, 12 | description: { 13 | story: 14 | 'Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.', 15 | }, 16 | }, 17 | }; 18 | 19 | export default Example; 20 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/Props.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Tooltip, UncontrolledTooltip } from 'reactstrap'; 3 | import Props from '../Props'; 4 | 5 | function Example() { 6 | return ; 7 | } 8 | 9 | export default Example; 10 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/Tooltip.js: -------------------------------------------------------------------------------- 1 | /* eslint react/no-multi-comp: 0, react/prop-types: 0 */ 2 | import Example from './TooltipExample'; 3 | // eslint-disable-next-line import/extensions 4 | import TooltipExample from '!!raw-loader!./TooltipExample'; 5 | 6 | Example.parameters = { 7 | docs: { 8 | source: { 9 | code: TooltipExample, 10 | language: 'jsx', 11 | type: 'auto', 12 | }, 13 | }, 14 | }; 15 | 16 | Example.args = { 17 | autohide: true, 18 | flip: true, 19 | }; 20 | 21 | Example.argTypes = { 22 | placement: { 23 | control: { type: 'select' }, 24 | options: ['top', 'left', 'right', 'bottom'], 25 | }, 26 | }; 27 | 28 | export default Example; 29 | -------------------------------------------------------------------------------- /stories/examples/Tooltip/Uncontrolled.js: -------------------------------------------------------------------------------- 1 | /* eslint react/no-multi-comp: 0, react/prop-types: 0 */ 2 | import React from 'react'; 3 | import { UncontrolledTooltip } from 'reactstrap'; 4 | 5 | export default function Example(props) { 6 | return ( 7 |
    8 |

    9 | Somewhere in here is a{' '} 10 | 15 | tooltip 16 | 17 | . 18 |

    19 | 23 | Hello world! 24 | 25 |
    26 | ); 27 | } 28 | 29 | Example.parameters = { 30 | docs: { 31 | description: { 32 | story: 'Not a fan of handling state? We got `UncontrolledTooltip`.', 33 | }, 34 | }, 35 | }; 36 | -------------------------------------------------------------------------------- /stories/examples/options.js: -------------------------------------------------------------------------------- 1 | export const colors = [ 2 | 'primary', 3 | 'secondary', 4 | 'success', 5 | 'danger', 6 | 'warning', 7 | 'info', 8 | 'light', 9 | 'dark', 10 | ]; 11 | export const buttonColors = [...colors, 'link']; 12 | export const bgColors = [...colors, 'transparent']; 13 | export const textColors = [ 14 | ...colors, 15 | 'body', 16 | 'muted', 17 | 'white', 18 | 'black-50', 19 | 'white-50', 20 | ]; 21 | -------------------------------------------------------------------------------- /types/lib/Accordion.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface AccordionProps extends React.HTMLAttributes { 5 | tag?: React.ElementType; 6 | cssModule?: CSSModule; 7 | flush?: boolean; 8 | innerRef?: React.Ref; 9 | open: string | string[]; 10 | toggle: (targetId: string) => void; 11 | } 12 | 13 | export interface UncontrolledAccordionProps extends Omit { 14 | defaultOpen?: string | string[]; 15 | stayOpen?: boolean; 16 | } 17 | 18 | declare class Accordion extends React.Component {} 19 | export default Accordion; 20 | -------------------------------------------------------------------------------- /types/lib/AccordionBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface AccordionBodyProps extends React.HTMLAttributes { 5 | tag?: React.ElementType; 6 | cssModule?: CSSModule; 7 | innerRef?: React.Ref; 8 | accordionId: string; 9 | } 10 | 11 | declare class AccordionBody extends React.Component {} 12 | export default AccordionBody; 13 | -------------------------------------------------------------------------------- /types/lib/AccordionHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface AccordionHeaderProps extends React.HTMLAttributes { 5 | tag?: React.ElementType; 6 | cssModule?: CSSModule; 7 | innerRef?: React.Ref; 8 | targetId: string; 9 | } 10 | 11 | declare class AccordionHeader extends React.Component {} 12 | export default AccordionHeader; 13 | -------------------------------------------------------------------------------- /types/lib/AccordionItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface AccordionItemProps extends React.HTMLAttributes { 5 | tag?: React.ElementType; 6 | cssModule?: CSSModule; 7 | innerRef?: React.Ref; 8 | } 9 | 10 | declare class AccordionItem extends React.Component {} 11 | export default AccordionItem; 12 | -------------------------------------------------------------------------------- /types/lib/Alert.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | import { FadeProps } from './Fade'; 4 | 5 | export interface UncontrolledAlertProps 6 | extends React.HTMLAttributes { 7 | [key: string]: any; 8 | closeClassName?: string; 9 | closeAriaLabel?: string; 10 | cssModule?: CSSModule; 11 | color?: string; 12 | fade?: boolean; 13 | tag?: React.ElementType; 14 | transition?: FadeProps; 15 | innerRef?: React.Ref; 16 | } 17 | export interface AlertProps extends UncontrolledAlertProps { 18 | isOpen?: boolean; 19 | toggle?: React.MouseEventHandler; 20 | } 21 | 22 | declare class Alert extends React.Component {} 23 | export default Alert; 24 | -------------------------------------------------------------------------------- /types/lib/Badge.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface BadgeProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | color?: string; 7 | pill?: boolean; 8 | tag?: React.ElementType; 9 | innerRef?: React.Ref; 10 | cssModule?: CSSModule; 11 | } 12 | 13 | declare class Badge extends React.Component {} 14 | export default Badge; 15 | -------------------------------------------------------------------------------- /types/lib/Breadcrumb.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface BreadcrumbProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | listTag?: React.ElementType; 8 | listClassName?: string; 9 | cssModule?: CSSModule; 10 | } 11 | 12 | declare class Breadcrumb extends React.Component {} 13 | export default Breadcrumb; 14 | -------------------------------------------------------------------------------- /types/lib/BreadcrumbItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface BreadcrumbItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | active?: boolean; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class BreadcrumbItem extends React.Component {} 12 | export default BreadcrumbItem; 13 | -------------------------------------------------------------------------------- /types/lib/Button.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ButtonProps 5 | extends React.ButtonHTMLAttributes { 6 | [key: string]: any; 7 | outline?: boolean; 8 | active?: boolean; 9 | block?: boolean; 10 | color?: string; 11 | tag?: React.ElementType; 12 | innerRef?: React.Ref; 13 | size?: string; 14 | cssModule?: CSSModule; 15 | close?: boolean; 16 | } 17 | 18 | declare class Button extends React.Component {} 19 | export default Button; 20 | -------------------------------------------------------------------------------- /types/lib/ButtonDropdown.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { UncontrolledDropdownProps, DropdownProps } from './Dropdown'; 3 | export { 4 | UncontrolledDropdownProps as UncontrolledButtonDropdownProps, 5 | DropdownProps as ButtonDropdownProps, 6 | }; 7 | 8 | declare class ButtonDropdown extends React.Component {} 9 | export default ButtonDropdown; 10 | -------------------------------------------------------------------------------- /types/lib/ButtonGroup.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ButtonGroupProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | size?: string; 9 | vertical?: boolean; 10 | } 11 | 12 | declare class ButtonGroup extends React.Component {} 13 | export default ButtonGroup; 14 | -------------------------------------------------------------------------------- /types/lib/ButtonToggle.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | type Omit = Pick>; 4 | 5 | export interface ButtonToggleProps 6 | extends Omit, 'defaultValue'> { 7 | [key: string]: any; 8 | defaultValue?: boolean; 9 | } 10 | 11 | declare class ButtonToggle extends React.Component {} 12 | export default ButtonToggle; 13 | -------------------------------------------------------------------------------- /types/lib/ButtonToolbar.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ButtonToolbarProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class ButtonToolbar extends React.Component {} 11 | export default ButtonToolbar; 12 | -------------------------------------------------------------------------------- /types/lib/Card.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | inverse?: boolean; 8 | color?: string; 9 | body?: boolean; 10 | outline?: boolean; 11 | cssModule?: CSSModule; 12 | innerRef?: React.Ref; 13 | } 14 | 15 | declare class Card extends React.Component {} 16 | export default Card; 17 | -------------------------------------------------------------------------------- /types/lib/CardBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardBodyProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | innerRef?: React.Ref; 9 | } 10 | 11 | declare class CardBody extends React.Component {} 12 | export default CardBody; 13 | -------------------------------------------------------------------------------- /types/lib/CardColumns.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardColumnsProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardColumns extends React.Component {} 11 | export default CardColumns; 12 | -------------------------------------------------------------------------------- /types/lib/CardDeck.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardDeckProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardDeck extends React.Component {} 11 | export default CardDeck; 12 | -------------------------------------------------------------------------------- /types/lib/CardFooter.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardFooterProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardFooter extends React.Component {} 11 | export default CardFooter; 12 | -------------------------------------------------------------------------------- /types/lib/CardGroup.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardGroupProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardGroup extends React.Component {} 11 | export default CardGroup; 12 | -------------------------------------------------------------------------------- /types/lib/CardHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardHeaderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardHeader extends React.Component {} 11 | export default CardHeader; 12 | -------------------------------------------------------------------------------- /types/lib/CardImg.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardImgProps 5 | extends React.ImgHTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | top?: boolean; 9 | bottom?: boolean; 10 | cssModule?: CSSModule; 11 | } 12 | 13 | declare class CardImg extends React.Component {} 14 | export default CardImg; 15 | -------------------------------------------------------------------------------- /types/lib/CardImgOverlay.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardImgOverlayProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardImgOverlay extends React.Component {} 11 | export default CardImgOverlay; 12 | -------------------------------------------------------------------------------- /types/lib/CardLink.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardLinkProps 5 | extends React.AnchorHTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | innerRef?: React.Ref; 9 | cssModule?: CSSModule; 10 | } 11 | 12 | declare class CardLink extends React.Component {} 13 | export default CardLink; 14 | -------------------------------------------------------------------------------- /types/lib/CardSubtitle.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardSubtitleProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardSubtitle extends React.Component {} 11 | export default CardSubtitle; 12 | -------------------------------------------------------------------------------- /types/lib/CardText.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardTextProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardText extends React.Component {} 11 | export default CardText; 12 | -------------------------------------------------------------------------------- /types/lib/CardTitle.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CardTitleProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class CardTitle extends React.Component {} 11 | export default CardTitle; 12 | -------------------------------------------------------------------------------- /types/lib/CarouselCaption.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CarouselCaptionProps 5 | extends React.HTMLAttributes { 6 | [key: string]: any; 7 | captionHeader?: React.ReactNode; 8 | captionText: React.ReactNode; 9 | cssModule?: CSSModule; 10 | } 11 | 12 | declare class CarouselCaption extends React.Component {} 13 | export default CarouselCaption; 14 | -------------------------------------------------------------------------------- /types/lib/CarouselControl.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CarouselControlProps 5 | extends React.HTMLAttributes { 6 | [key: string]: any; 7 | direction: 'prev' | 'next'; 8 | onClickHandler: () => void; 9 | cssModule?: CSSModule; 10 | directionText?: string; 11 | } 12 | 13 | export default class CarouselControl extends React.Component< 14 | CarouselControlProps 15 | > {} 16 | -------------------------------------------------------------------------------- /types/lib/CarouselIndicators.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CarouselIndicatorsProps 5 | extends React.HTMLAttributes { 6 | [key: string]: any; 7 | items: object[]; 8 | activeIndex: number; 9 | cssModule?: CSSModule; 10 | onClickHandler: (idx: number) => void; 11 | } 12 | 13 | declare class CarouselIndicators extends React.Component< 14 | CarouselIndicatorsProps 15 | > {} 16 | export default CarouselIndicators; 17 | -------------------------------------------------------------------------------- /types/lib/CarouselItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CarouselItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | in?: boolean; 8 | cssModule?: CSSModule; 9 | slide?: boolean; 10 | onEnter?: () => void; 11 | onEntering?: () => void; 12 | onEntered?: () => void; 13 | onExit?: () => void; 14 | onExiting?: () => void; 15 | onExited?: () => void; 16 | } 17 | 18 | declare class CarouselItem extends React.Component {} 19 | export default CarouselItem; 20 | -------------------------------------------------------------------------------- /types/lib/CloseButton.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CloseButtonProps 5 | extends React.ButtonHTMLAttributes { 6 | active?: boolean; 7 | variant?: 'white' | 'black'; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class CloseButton extends React.Component {} 12 | export default CloseButton; -------------------------------------------------------------------------------- /types/lib/Col.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export type ColumnProps = 5 | | string 6 | | boolean 7 | | number 8 | | { 9 | size?: boolean | number | string; 10 | offset?: string | number; 11 | order?: string | number; 12 | }; 13 | 14 | export interface ColProps extends React.HTMLAttributes { 15 | [key: string]: any; 16 | tag?: React.ElementType; 17 | cssModule?: CSSModule; 18 | xs?: ColumnProps; 19 | sm?: ColumnProps; 20 | md?: ColumnProps; 21 | lg?: ColumnProps; 22 | xl?: ColumnProps; 23 | xxl?: ColumnProps; 24 | 25 | // custom widths 26 | widths?: string[]; 27 | } 28 | 29 | declare class Col extends React.Component {} 30 | export default Col; 31 | -------------------------------------------------------------------------------- /types/lib/Collapse.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface CollapseProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | isOpen?: boolean; 7 | cssModule?: CSSModule; 8 | tag?: React.ElementType; 9 | horizontal?: boolean; 10 | navbar?: boolean; 11 | delay?: { 12 | show: number; 13 | hide: number; 14 | }; 15 | onOpened?: () => void; 16 | onClosed?: () => void; 17 | onEntering?: () => void; 18 | onEntered?: () => void; 19 | onExit?: () => void; 20 | onExiting?: () => void; 21 | onExited?: () => void; 22 | innerRef?: React.Ref; 23 | } 24 | 25 | export interface UncontrolledCollapseProps extends CollapseProps { 26 | defaultOpen?: boolean; 27 | toggler: string; 28 | toggleEvents?: string[]; 29 | } 30 | 31 | declare class Collapse extends React.Component {} 32 | export default Collapse; 33 | -------------------------------------------------------------------------------- /types/lib/Container.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ContainerProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | fluid?: boolean | string; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class Container extends React.Component {} 12 | export default Container; 13 | -------------------------------------------------------------------------------- /types/lib/DropdownItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface DropdownItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | active?: boolean; 7 | disabled?: boolean; 8 | divider?: boolean; 9 | tag?: React.ElementType; 10 | header?: boolean; 11 | cssModule?: CSSModule; 12 | href?: string; 13 | toggle?: boolean; 14 | text?: boolean; 15 | } 16 | 17 | declare class DropdownItem extends React.Component {} 18 | export default DropdownItem; 19 | -------------------------------------------------------------------------------- /types/lib/DropdownMenu.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import type { Modifier } from '@popperjs/core'; 3 | import { CSSModule } from './utils'; 4 | 5 | export interface DropdownMenuProps extends React.HTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | dark?: boolean; 9 | right?: boolean; 10 | flip?: boolean; 11 | modifiers?: Modifier[]; 12 | cssModule?: CSSModule; 13 | persist?: boolean; 14 | strategy?: string; 15 | container?: string | HTMLElement | React.RefObject; 16 | updateOnSelect?: boolean; 17 | } 18 | 19 | declare class DropdownMenu extends React.Component {} 20 | export default DropdownMenu; 21 | -------------------------------------------------------------------------------- /types/lib/DropdownToggle.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface DropdownToggleProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | caret?: boolean; 7 | color?: string; 8 | cssModule?: CSSModule; 9 | disabled?: boolean; 10 | outline?: boolean; 11 | 'data-toggle'?: string; 12 | 'aria-haspopup'?: boolean; 13 | split?: boolean; 14 | tag?: React.ElementType; 15 | nav?: boolean; 16 | size?: string; 17 | } 18 | 19 | declare class DropdownToggle extends React.Component {} 20 | export default DropdownToggle; 21 | -------------------------------------------------------------------------------- /types/lib/Fade.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface FadeProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | in?: boolean; 7 | baseClass?: string; 8 | baseClassIn?: string; 9 | tag?: React.ElementType; 10 | cssModule?: CSSModule; 11 | transitionAppearTimeout?: number; 12 | transitionEnterTimeout?: number; 13 | transitionLeaveTimeout?: number; 14 | transitionAppear?: boolean; 15 | transitionEnter?: boolean; 16 | transitionLeave?: boolean; 17 | onLeave?: () => void; 18 | onEnter?: () => void; 19 | innerRef?: React.Ref; 20 | } 21 | 22 | declare class Fade extends React.Component {} 23 | export default Fade; 24 | -------------------------------------------------------------------------------- /types/lib/Form.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface FormProps extends React.FormHTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | innerRef?: React.Ref; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class Form extends React.Component {} 12 | export default Form; 13 | -------------------------------------------------------------------------------- /types/lib/FormFeedback.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface FormFeedbackProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: string; 7 | cssModule?: CSSModule; 8 | valid?: boolean; 9 | tooltip?: boolean; 10 | } 11 | 12 | declare class FormFeedback extends React.Component {} 13 | export default FormFeedback; 14 | -------------------------------------------------------------------------------- /types/lib/FormGroup.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { CSSModule } from "./utils"; 4 | 5 | export interface FormGroupProps extends React.HTMLAttributes { 6 | [key: string]: any; 7 | row?: boolean; 8 | check?: boolean; 9 | switch?: boolean; 10 | inline?: boolean; 11 | noMargin?: boolean; 12 | floating?: boolean; 13 | disabled?: boolean; 14 | tag?: React.ElementType; 15 | cssModule?: CSSModule; 16 | } 17 | 18 | declare class FormGroup extends React.Component {} 19 | export default FormGroup; 20 | -------------------------------------------------------------------------------- /types/lib/FormText.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface FormTextProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | inline?: boolean; 7 | tag?: React.ElementType; 8 | color?: string; 9 | cssModule?: CSSModule; 10 | } 11 | 12 | declare class FormText extends React.Component {} 13 | export default FormText; 14 | -------------------------------------------------------------------------------- /types/lib/InputGroup.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface InputGroupProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | size?: string; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class InputGroup extends React.Component {} 12 | export default InputGroup; 13 | -------------------------------------------------------------------------------- /types/lib/InputGroupText.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface InputGroupTextProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class InputGroupText extends React.Component {} 11 | export default InputGroupText; 12 | -------------------------------------------------------------------------------- /types/lib/Label.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | import { ColumnProps } from './Col'; 4 | 5 | export interface LabelProps 6 | extends React.LabelHTMLAttributes { 7 | [key: string]: any; 8 | hidden?: boolean; 9 | check?: boolean; 10 | size?: string; 11 | disabled?: boolean; 12 | for?: string; 13 | tag?: React.ElementType; 14 | cssModule?: CSSModule; 15 | xs?: ColumnProps; 16 | sm?: ColumnProps; 17 | md?: ColumnProps; 18 | lg?: ColumnProps; 19 | xl?: ColumnProps; 20 | xxl?: ColumnProps; 21 | 22 | // custom widths 23 | widths?: string[]; 24 | } 25 | 26 | declare class Label extends React.Component {} 27 | export default Label; 28 | -------------------------------------------------------------------------------- /types/lib/List.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | type?: string; 9 | } 10 | 11 | declare class List extends React.Component {} 12 | export default List; 13 | -------------------------------------------------------------------------------- /types/lib/ListGroup.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListGroupProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | flush?: boolean; 8 | horizontal?: boolean | string; 9 | numbered?: boolean; 10 | cssModule?: CSSModule; 11 | } 12 | 13 | declare class ListGroup extends React.Component {} 14 | export default ListGroup; 15 | -------------------------------------------------------------------------------- /types/lib/ListGroupItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListGroupItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | active?: boolean; 8 | disabled?: boolean; 9 | color?: string; 10 | action?: boolean; 11 | cssModule?: CSSModule; 12 | href?: string; 13 | } 14 | 15 | declare class ListGroupItem extends React.Component {} 16 | export default ListGroupItem; 17 | -------------------------------------------------------------------------------- /types/lib/ListGroupItemHeading.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListGroupItemHeadingProps 5 | extends React.HTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class ListGroupItemHeading extends React.Component< 12 | ListGroupItemHeadingProps 13 | > {} 14 | export default ListGroupItemHeading; 15 | -------------------------------------------------------------------------------- /types/lib/ListGroupItemText.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListGroupItemTextProps 5 | extends React.HTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class ListGroupItemText extends React.Component< 12 | ListGroupItemTextProps 13 | > {} 14 | export default ListGroupItemText; 15 | -------------------------------------------------------------------------------- /types/lib/ListInlineItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ListInlineItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class ListInlineItem extends React.Component {} 11 | export default ListInlineItem; 12 | -------------------------------------------------------------------------------- /types/lib/Media.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface MediaProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | body?: boolean; 7 | bottom?: boolean; 8 | cssModule?: CSSModule; 9 | heading?: boolean; 10 | left?: boolean; 11 | list?: boolean; 12 | middle?: boolean; 13 | object?: boolean; 14 | right?: boolean; 15 | tag?: React.ElementType; 16 | top?: boolean; 17 | src?: string; 18 | href?: string; 19 | alt?: string; 20 | } 21 | 22 | declare class Media extends React.Component {} 23 | export default Media; 24 | -------------------------------------------------------------------------------- /types/lib/ModalBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ModalBodyProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class ModalBody extends React.Component {} 11 | export default ModalBody; 12 | -------------------------------------------------------------------------------- /types/lib/ModalFooter.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ModalFooterProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class ModalFooter extends React.Component {} 11 | export default ModalFooter; 12 | -------------------------------------------------------------------------------- /types/lib/ModalHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ModalHeaderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | wrapTag?: React.ElementType; 9 | toggle?: React.MouseEventHandler; 10 | } 11 | 12 | declare class ModalHeader extends React.Component {} 13 | export default ModalHeader; 14 | -------------------------------------------------------------------------------- /types/lib/Nav.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tabs?: boolean; 7 | pills?: boolean; 8 | vertical?: boolean | string; 9 | horizontal?: string; 10 | justified?: boolean; 11 | fill?: boolean; 12 | navbar?: boolean; 13 | card?: boolean; 14 | tag?: React.ElementType; 15 | cssModule?: CSSModule; 16 | } 17 | 18 | declare class Nav extends React.Component {} 19 | export default Nav; 20 | -------------------------------------------------------------------------------- /types/lib/NavItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | active?: boolean; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class NavItem extends React.Component {} 12 | export default NavItem; 13 | -------------------------------------------------------------------------------- /types/lib/NavLink.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavLinkProps 5 | extends React.AnchorHTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | innerRef?: React.Ref; 9 | disabled?: boolean; 10 | active?: boolean; 11 | cssModule?: CSSModule; 12 | } 13 | 14 | declare class NavLink extends React.Component {} 15 | export default NavLink; 16 | -------------------------------------------------------------------------------- /types/lib/Navbar.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavbarProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | light?: boolean; 7 | dark?: boolean; 8 | full?: boolean; 9 | fixed?: string; 10 | sticky?: string; 11 | color?: string; 12 | container?: boolean | 'fluid' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; 13 | tag?: React.ElementType; 14 | cssModule?: CSSModule; 15 | expand?: boolean | string; 16 | } 17 | 18 | declare class Navbar extends React.Component {} 19 | export default Navbar; 20 | -------------------------------------------------------------------------------- /types/lib/NavbarBrand.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavbarBrandProps 5 | extends React.AnchorHTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class NavbarBrand extends React.Component {} 12 | export default NavbarBrand; 13 | -------------------------------------------------------------------------------- /types/lib/NavbarText.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavbarTextProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class NavbarText extends React.Component {} 11 | export default NavbarText; 12 | -------------------------------------------------------------------------------- /types/lib/NavbarToggler.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface NavbarTogglerProps 5 | extends React.ButtonHTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class NavbarToggler extends React.Component {} 12 | export default NavbarToggler; 13 | -------------------------------------------------------------------------------- /types/lib/OffcanvasBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface OffcanvasBodyProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class OffcanvasBody extends React.Component {} 11 | export default OffcanvasBody; 12 | -------------------------------------------------------------------------------- /types/lib/OffcanvasHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface OffcanvasHeaderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | wrapTag?: React.ElementType; 9 | toggle?: React.MouseEventHandler; 10 | } 11 | 12 | declare class OffcanvasHeader extends React.Component {} 13 | export default OffcanvasHeader; 14 | -------------------------------------------------------------------------------- /types/lib/Pagination.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PaginationProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | listClassName?: string; 7 | cssModule?: CSSModule; 8 | size?: string; 9 | tag?: React.ElementType; 10 | listTag?: React.ElementType; 11 | 'aria-label'?: string; 12 | } 13 | 14 | declare class Pagination extends React.Component {} 15 | export default Pagination; 16 | -------------------------------------------------------------------------------- /types/lib/PaginationItem.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PaginationItemProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | cssModule?: CSSModule; 7 | active?: boolean; 8 | disabled?: boolean; 9 | tag?: React.ElementType; 10 | } 11 | 12 | declare class PaginationItem extends React.Component {} 13 | export default PaginationItem; 14 | -------------------------------------------------------------------------------- /types/lib/PaginationLink.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PaginationLinkProps 5 | extends React.AnchorHTMLAttributes { 6 | [key: string]: any; 7 | 'aria-label'?: string; 8 | cssModule?: CSSModule; 9 | next?: boolean; 10 | previous?: boolean; 11 | first?: boolean; 12 | last?: boolean; 13 | tag?: React.ElementType; 14 | } 15 | 16 | declare class PaginationLink extends React.Component {} 17 | export default PaginationLink; 18 | -------------------------------------------------------------------------------- /types/lib/Placeholder.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PlaceholderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | color?: string; 7 | tag?: React.ElementType; 8 | animation?: string; 9 | className?: string; 10 | cssModule?: CSSModule; 11 | size?: string; 12 | widths?: string[]; 13 | innerRef?: React.Ref; 14 | } 15 | 16 | declare class Placeholder extends React.Component {} 17 | export default Placeholder; -------------------------------------------------------------------------------- /types/lib/PlaceholderButton.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PlaceholderButtonProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | size?: string; 7 | color?: string; 8 | outline?: boolean; 9 | cssModule?: CSSModule; 10 | tag?: React.ElementType; 11 | } 12 | 13 | declare class PlaceholderButton extends React.Component {} 14 | export default PlaceholderButton; -------------------------------------------------------------------------------- /types/lib/PopoverBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PopoverBodyProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class PopoverBody extends React.Component {} 11 | export default PopoverBody; 12 | -------------------------------------------------------------------------------- /types/lib/PopoverHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface PopoverHeaderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | } 9 | 10 | declare class PopoverHeader extends React.Component {} 11 | export default PopoverHeader; 12 | -------------------------------------------------------------------------------- /types/lib/Progress.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ProgressProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | bar?: boolean; 7 | multi?: boolean; 8 | tag?: string; 9 | value?: string | number; 10 | min?: string | number; 11 | max?: string | number; 12 | animated?: boolean; 13 | striped?: boolean; 14 | color?: string; 15 | cssModule?: CSSModule; 16 | barClassName?: string; 17 | barStyle?: React.CSSProperties; 18 | barAriaValueText?: string; 19 | barAriaLabelledBy?: string; 20 | } 21 | 22 | declare class Progress extends React.Component {} 23 | export default Progress; 24 | -------------------------------------------------------------------------------- /types/lib/Row.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | type Omit = Pick>; 5 | 6 | export interface RowProps 7 | extends Omit, 'form'> { 8 | [key: string]: any; 9 | cssModule?: CSSModule; 10 | tag?: React.ElementType; 11 | noGutters?: boolean; 12 | xs?: number | string; 13 | sm?: number | string; 14 | md?: number | string; 15 | lg?: number | string; 16 | xl?: number | string; 17 | xxl?: number | string; 18 | } 19 | 20 | declare class Row extends React.Component {} 21 | export default Row; 22 | -------------------------------------------------------------------------------- /types/lib/Spinner.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface SpinnerProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | type?: string; 8 | size?: any; 9 | color?: string; 10 | cssModule?: CSSModule; 11 | } 12 | 13 | declare class Spinner extends React.Component {} 14 | export default Spinner; 15 | -------------------------------------------------------------------------------- /types/lib/TabContent.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface TabContentProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | activeTab?: number | string; 8 | cssModule?: CSSModule; 9 | } 10 | 11 | declare class TabContent extends React.Component {} 12 | export default TabContent; 13 | -------------------------------------------------------------------------------- /types/lib/TabPane.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface TabPaneProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | tabId?: number | string; 9 | } 10 | 11 | declare class TabPane extends React.Component {} 12 | export default TabPane; 13 | -------------------------------------------------------------------------------- /types/lib/Table.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface TableProps 5 | extends React.TableHTMLAttributes { 6 | [key: string]: any; 7 | cssModule?: CSSModule; 8 | size?: string; 9 | bordered?: boolean; 10 | borderless?: boolean; 11 | striped?: boolean; 12 | inverse?: boolean; 13 | hover?: boolean; 14 | reflow?: boolean; 15 | responsive?: boolean | string; 16 | tag?: React.ElementType; 17 | responsiveTag?: React.ElementType; 18 | innerRef?: React.Ref; 19 | } 20 | 21 | declare class Table extends React.Component {} 22 | export default Table; 23 | -------------------------------------------------------------------------------- /types/lib/Tag.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface TagProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | color?: string; 7 | pill?: boolean; 8 | tag?: React.ElementType; 9 | cssModule?: CSSModule; 10 | } 11 | 12 | declare class Tag extends React.Component {} 13 | export default Tag; 14 | -------------------------------------------------------------------------------- /types/lib/Toast.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | import { FadeProps } from './Fade'; 4 | 5 | export interface ToastProps extends React.HTMLAttributes { 6 | [key: string]: any; 7 | tag?: React.ElementType; 8 | cssModule?: CSSModule; 9 | innerRef?: React.Ref; 10 | isOpen?: boolean; 11 | fade?: boolean; 12 | transition?: FadeProps; 13 | } 14 | 15 | declare class Toast extends React.Component {} 16 | export default Toast; 17 | -------------------------------------------------------------------------------- /types/lib/ToastBody.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ToastBodyProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | innerRef?: React.Ref; 9 | } 10 | 11 | declare class ToastBody extends React.Component {} 12 | export default ToastBody; 13 | -------------------------------------------------------------------------------- /types/lib/ToastHeader.d.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | import { CSSModule } from './utils'; 3 | 4 | export interface ToastHeaderProps extends React.HTMLAttributes { 5 | [key: string]: any; 6 | tag?: React.ElementType; 7 | cssModule?: CSSModule; 8 | wrapTag?: React.ElementType; 9 | toggle?: React.MouseEventHandler; 10 | icon?: string | React.ReactNode; 11 | close?: React.ReactNode; 12 | closeAriaLabel?: string; 13 | } 14 | 15 | declare class ToastHeader extends React.Component {} 16 | export default ToastHeader; 17 | -------------------------------------------------------------------------------- /types/lib/utils.d.ts: -------------------------------------------------------------------------------- 1 | export interface CSSModule { 2 | [className: string]: string; 3 | } 4 | 5 | export type setGlobalCssModule = (cssModule: CSSModule) => void; 6 | -------------------------------------------------------------------------------- /types/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "lib": ["es6", "dom"], 5 | "noImplicitAny": true, 6 | "noImplicitThis": true, 7 | "strictNullChecks": true, 8 | "strictFunctionTypes": true, 9 | "jsx": "react", 10 | "baseUrl": ".", 11 | "typeRoots": ["../"], 12 | "types": [], 13 | "noEmit": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "paths": { 16 | "reactstrap": ["lib"] 17 | } 18 | }, 19 | "files": ["index.d.ts", "reactstrap-tests.tsx"] 20 | } 21 | -------------------------------------------------------------------------------- /types/tslint.json: -------------------------------------------------------------------------------- 1 | { "extends": "dtslint/dtslint.json" } 2 | --------------------------------------------------------------------------------