Bootstrap4 Additional Components
Last updated
SPIN (React) v2
Last updated
All of the components from are availeble to import from the root /components. Also some of them are extended by some new functionalities / props.
Card and Collapse based Accordion. Should be composed of the provided subcomponents. Can work in an controlled and uncontrolled mode.
Props:
onToggle:(opened: bool) => void - Accordion is being opened or closed. Providing this function will set the Accordion into controlled mode.
open - For controlled mode only. Should the accordion be opned
initialOpen - For uncontrolled mode only. Should the Accordion start opened or not.
Example Implementation:
Should contain the collapsable content of the Accordion. This is basically a Collapse + CardBody composition.
Props:
childen:node - Collapsable children
The trogger for open/close the accordion. Based on CardHeader.
Props:
children:node - The elements which should be rendered as Accordion trigger.
Shows an information (preferably icon) if the Accordion is opened or closed
Props:
open:node - shown when the Accordion is open (default: )
closed:node - shown when the Accordion is closed (default: )
Avatar consists of two versions Avatar.Image, Avatar.Font, for displaying avatars and text/icon based versions respocitvely.
Common Props:
size:string - Available options: sm, md, lg.
addOns:node - An array of additional components which will be placed within the Avatar. Allowed componets are: AvatarAddOn.Icon and AvatarAddOn.Badge. Please not that this should be an array of elements, and each of them should have a key prop provided.
Renders text based avatars.
children:node - Text or a FontAwesome icon
bgColor - Background color id
fgColor - Text color id
bgCustomColor - A raw hex or rgba color for the background
fgCustomColor - A raw hex or rgba color of the text
Displays <img/> based avatars.
Props:
src:string - URL passed to the <img />
placeholder:node - A text node which will be rendered until the image is loaded. Typically it should ba a FontAwesome icon <i className="fa fa-..." />
alt:strin - Alt Text for the <img />
The same as Reacstrap's Badge but for use only in Avatar's addOns prop. They are placed in the top-right corner of the Avatar.
Icons are placed in the in the bottom-right corner of the Avatar and they can be stacked on top of each other. For example a configuration of:
will produce the following result:
The same as Reactstrap's Card, but with some additional props
type:string - Available types are: border, side-border, border-dash, border-dot, background, shadow, none; Effects applied to the card itself.
color:string - Color id assigned with the effect provided by type prop.
The same sa Reatstrap's CardHeader, but with some additional props
type:string - Available types are: background and border
color:string - Color id asssigned with the effect provided by type props.
Allows you to crate whole elements (rows, cards, etc) to trigger a checkbox / radio contained within.
Props:
children:node - Elements rendered inside
tag:string|func - Component that should be used internally to render (default: div)
The trigger element will pass all of the clicks to the input provided by Checkable.
Props:
children:node - Elements rendered inside
The input element which will be checked when Trigger is clicked.
Props:
children:node- Elements rendered inside of the input
tag:string|func - The input component itself (default: Input)
Example Implementation:
Toggles the layout to be empty - Sidebar and Navbar are disabled and the content is set to be centered within the viewport. Mainly used for single Card pages for example: Login, Register, etc...
Props: children:node - element which will be rendered in the center of the screen.
More flexible dropdown menu, which consists of static and fluid sections. In mobile mode while in navbar this dropdown will fill the whole screen. Uses also Props and Context from Reactstrap's DropdownMenu
Props:
children:node ExtendedDropdown.Sections from which you can compose the Dropodown.
There are two types of sections - static, and fluid. Static section don't resize vertically, and fluid do resize. Typically you should add Reactstrap's ListGroups in the fluid part, so they can be scrolled inside.
Props:
fluid:boolean - should the section be stretched/shrinked vertically
tag:string|func - tag element used as the Section. Allows to make whole sections as Links.
Renders an image with defined text in the center of the picture.
Props
children:node - Element of which the src prop will be populated with the placeholder image
Renders a FontAwesome icon in the center of the picture.
Props
iconChar:string - FontAwesome character to render - for example pasting will render fa-picture-o
children:node - Element of which the src prop will be populated with the placeholder image
Icon with badge, mainly used in buttons and navs. Preview:
badge:node - Reactstrap's Badge elemnt which will be added to the Icon
children:node - FontAwesome icon element
The whole layout parent, contains the state of the layout, and provides data to child layout elements.
children:node - one of Layout.Content, Layout.Sidebar, Layout.Navbar. Providing these will make the Layout element to compose the layout properly.
sidebarSlim:boolean - Should the sidebar be slim when collapsed on >= lg screens
Reactstrap's Navbar container.
children:node - Typically Navbar element
The Sidebar container.
children:node - Typically Sidebar component inside
sidebarSlim:boolean - should the sidebar be in slim mode when collapsed on >= lg (dont' use directly, provided by Layout)
sidebarCollapsed:boolean - is the sidebar collapsed (dont' use directly, provided by Layout)
Page content container.
children:node - Page content
Provides pageConfig object to the component which is composed of the followin fields:
sidebarHidden:boolean - is sidebar hidden
navbarHidden:boolean - is navbar hidden
footerHideen:boolean - is footer hidden
sidebarCollapsed:boolean - is sidebar collapsed
sidebarSlim:boolean - is slim sidebar option is enabled
pageTitle: string - title of the current page
pageDescription: string - description of the current page
pageKeywords: string - meta keywords for the current page
toggleSidebar: func - toggle collapsed sidebar
A Dropdown which can contain Nested Dropdowns inside which will be rendered on the side of the main dropdown on hover. Renders as nested menus in Collapsed Navbars.
Example Implementation (taken from Only Navbar example)
The submenu element which is placed inside of the main dropdown and contains further nested DropodwnItems
Props
children:node - list of nested DropdownItems
title:string|node - the title which will be visible in the main Dropdown
tag:string|func - component which will be rendered as a parent (default: div)
subMenuTag:string|func - component which will contain the child elements (default: div)
When a user clicks outside of the provided child onClickOutside will be called.
onClickOutside:func - event handler called when the click occours
children:node - the element of outside which the click should be picked
active:boolean - is this functionality enabled
excludedElements:HTMLElement[] - deprecated which elements outside of the child should no trigger the click event
Reactstrap's Progress component extended with slim prop.
slim:boolean - should the progress bar be rendered in a slim version
The sidebar component which is build from Sidebar.Sections.
children:node - Sidebar.Section elemnets from which the sidebar will be build
slim:boolean - should the sidebar be in slim mode (avoid direct usage, provided by context)
collapsed:boolean - is the sidebar collased (avoid direct usage, provided by context)
Section of the sidebar
fluid:boolean - should the section be stretching/shrinking, typically used for SidebarMenu section
cover:boolean - no padding in the section should be used
Closes the sidebar in Overlay Mode, it is visible only when the sidebar is overlayed.
Allows the content to be scrolled inside in mobile devices. For example when you have 2 static Sidebar.Sections and 1 fluid for scrollable menu, you will come on a problem in mobile devices - the fluid part will be very small, and most of vertical screen space will be used for the static Sections. To mitigate this you can wrap 1 static Section and the fluid Section with this component. This will make both of those sections scrollable on mobile.
Props
children:node - Sections which will be wrapped in a scroll in mobile view.
Example Usage
The navigation menu. Composed of SidebarMenu.Items.
children:node - SidebarMenu.Items of which the menu will be composed
SidebarMenu entry, the top level ones contain icons, while the nested ones don't.
to:string- url to which the entry should point
children:node - nested SidebarMenu.Items, can't be used with to, should be one of them
title:string - the title of the entry
exact:bool - should the entry be marked as active by an exact url match
Element which will trigger the sidebar to be collapsed or not
Props
tag:string|func - the tag which will be used to render the element - NavLink default
children:node - contents of the Button
Ultility elements for conditional rendering and such.
Children of this component will only be rendered when the sidebar is not in slim mode
Children of this component will only be rendered when the sidebar is in slim mode
Children of this component will have their declared props overriden with the ones provided in slimProps object, when the sidebar is in slim mode. For example if we want an avatar inside the sidebar to change its size depending on the state of the sidebar. For example:
In the above when the Sidebar becomes slim the AvatarImage's size prop will be changed to md.
Props: all of the Modal props +
target:string - id of the trigger element which will show the Modal
Element which will close the Modal.
Props:
tag:string|func - Component which will be used to represent this trigger
Props: all of the Popover props +
activateTrigger:bool - should the targeted trigger receive the active class defined by the activeClassName prop
activeClassName:string - class which will be added to the trigger element when active
Uncontrolled Tabs container. Should be composed of UncontrolledTabs.NavLink and UncontrolledTabs.TabContent which are context extended versions of reactstrap's components.
Props:
children:node - composition of UncontrolledTabs.NavLink and UncontrolledTabs.TabContent
initialActiveTabId:string - the id of the tab that should be visible at the start
Props: all of the Popover props +
tabId:string - id of the corresponding TabContent which should be show when clicked
Props: all of the TabContent props +
A wrapper for - allows to generate placeholder images and injects them into the child element. This components is made out of two subcomponents which you should be using:
General Props: to see what options are used by holder.js. These options are available as props.
Uncontrolled version of .
Uncontrolled version of .
for switching the Uncontrolled Tabs.
connected with the UncontrolledTabs.
