# Bootstrap4 Additional Components

{% hint style="info" %}
This is the documentation for **"SPIN" v2:** [v2.react.spin.webkom.co](http://v2.react.spin.webkom.co)
{% endhint %}

All of the components from [Reactstrap](https://reactstrap.github.io/components) are availeble to import from the root `/components`. Also some of them are extended by some new functionalities / props.

### Accordion

`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:**

```jsx
<Accordion initialOpen>
    <Accordion.Header className='h6'>
        <Accordion.Indicator className="mr-2"/>
        Example Header
    </Accordion.Header>
    <Accordion.Body>
        <CardText>
            Some text...
        </CardText>
    </Accordion.Body>
</Accordion>
```

#### Accordion.Body

Should contain the collapsable content of the Accordion. This is basically a `Collapse` + `CardBody` composition.

**Props:**

* childen:node - Collapsable children

#### Accordion.Header

The trogger for open/close the accordion. Based on `CardHeader`.

**Props:**

* `children:node` - The elements which should be rendered as Accordion trigger.

#### Accordion.Indicator

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

`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.

#### Avatar.Font

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

#### Avatar.Image

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 />`

#### AvatarAddOn.Badge

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.

#### AvtarAddOn.Icon

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:

```jsx
<Avatar.Image
    size="lg"
    src="http://bs4.webkom.co/img/avatars/2.jpg"
    className="mr-1"
    addOns={[
        <AvatarAddOn.Icon 
            className="fa fa-circle"
            color="white"
            key="avatar-icon-bg"
        />,
        <AvatarAddOn.Icon 
            className="fa fa-circle"
            color="success"
            key="avatar-icon-bg"
        />,
        <AvatarAddOn.Icon 
            className="fa fa-plus"
            color="white"
            key="avatar-icon-fg"
            small
        />
    ]}
/>
```

will produce the following result:

![Stacked Avatar Icons](https://content.screencast.com/users/unskilled/folders/Jing/media/bd66dd88-e1c4-46a3-909c-63301e9bea9d/2018-07-25_1645.png)

### Card

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.

### CardHeader

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.

### Checkable

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)

#### Checkable.Trigger

The trigger element will pass all of the clicks to the input provided by Checkable.

**Props:**

* `children:node` - Elements rendered inside

#### Checkable.Input

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:**

```jsx
<Checkable tag={ Media }>
    <Checkable.Trigger tag={ Media } left top>
        <Avatar.Image
            {/* ... */}
        /> 
    </Checkable.Trigger>
    <Checkable.Trigger tag={ Media } body>
        <p>
            Some text
        </p>
    </Checkable.Trigger>
    <Media right top>
        <Checkable.Input tag={ CustomInput } type="checkbox" id="rightCheckbox1" defaultChecked />
    </Media>
</Checkable>
```

### EmptyLayout

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.

### ExtendedDropdown

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.Section`s from which you can compose the Dropodown.

#### ExtendedDropdown.Section

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 `ListGroup`s 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.

### HolderProvider

A wrapper for [holder.js](http://holderjs.com) - 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:** [Click here](https://github.com/imsky/holder#placeholder-options) to see what options are used by holder.js. These options are available as props.

#### HolderProvider.Text

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

#### HolderProvider.Icon

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

### IconWithBadge

Icon with badge, mainly used in buttons and navs. Preview:

![IconWithBadge Preview](https://content.screencast.com/users/unskilled/folders/Jing/media/0f17122f-7243-4dbe-be8e-8b652ef1cbee/2018-07-26_1009.png)

* `badge:node` - Reactstrap's `Badge` elemnt which will be added to the Icon
* `children:node` - FontAwesome icon element

### Layout

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

#### Layout.Navbar

Reactstrap's `Navbar` container.

* `children:node` - Typically `Navbar` element

#### Layout.Sidebar

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`**)**

#### Layout.Content

Page content container.

* `children:node` - Page content

#### withPageConfig (HOC)

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

### NestedDropdown

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)**

```jsx
<NestedDropdown nav inNavbar>
    <DropdownToggle nav>
        Apps
        <i className="fa fa-angle-down fa-fw ml-1"></i>
    </DropdownToggle>
    <DropdownMenu>
        <NestedDropdown.Submenu title="Mailbox">
            <DropdownItem tag={ Link } to="/apps/inbox">Inbox</DropdownItem>
            <DropdownItem tag={ Link } to="/apps/new-email">New Email</DropdownItem>
            <DropdownItem tag={ Link } to="/apps/email-details">Email Details</DropdownItem>
        </NestedDropdown.Submenu>
        <NestedDropdown.Submenu title="Profile">
            <DropdownItem tag={ Link } to="/apps/profile-details">Profile Details</DropdownItem>
            <DropdownItem tag={ Link } to="/apps/profile-edit">Profile Edit</DropdownItem>
        </NestedDropdown.Submenu>
        <DropdownItem tag={ Link } to="/apps/clients">Clients</DropdownItem>
        <DropdownItem tag={ Link } to="/apps/chat">Chat</DropdownItem>
    </DropdownMenu>
</NestedDropdown>
```

#### NestedDropdown.Submenu

The submenu element which is placed inside of the main dropdown and contains further nested `DropodwnItem`s

**Props**

* `children:node` - list of nested `DropdownItem`s
* `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)

### OuterClick

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

### Progress

Reactstrap's `Progress` component extended with `slim` prop.

* `slim:boolean` - should the progress bar be rendered in a slim version

### Sidebar

The sidebar component which is build from `Sidebar.Section`s.

* `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)**

#### Sidebar.Section

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

#### Sidebar.Close

Closes the sidebar in Overlay Mode, it is visible only when the sidebar is overlayed.

#### Sidebar.MobileFluid

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**

```jsx
<Sidebar>
    <Sidebar.Close>
        <SidebarTrigger tag={ 'a' } href="javascript:;">
            <i className="fa fa-times-circle fa-fw"></i>
        </SidebarTrigger>
    </Sidebar.Close>

    <Sidebar.Section>
        { /* ( Always Static Section ) */ }
    </Sidebar.Section>

    <Sidebar.MobileFluid>
        <Sidebar.Section>
            { /* ( Static only on Desktop ) */ }
        </Sidebar.Section>

        <Sidebar.Section fluid cover>
            { /* ( scrollable on Desktop and Mobile )  */ }
            <SidebarMiddleNav />
        </Sidebar.Section>

        <Sidebar.Section>
            { /* ( Static only on Desktop ) */ }
        </Sidebar.Section>
    </Sidebar.MobileFluid>
</Sidebar>
```

### SidebarMenu

The navigation menu. Composed of `SidebarMenu.Item`s.

* `children:node` - `SidebarMenu.Item`s of which the menu will be composed

#### SidebarMenu.Item

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.Item`s, 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

### SidebarTrigger

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

### Tools

Ultility elements for conditional rendering and such.

#### Tools.DefaultOnly

Children of this component will only be rendered when the sidebar is **not in slim mode**

#### Tools.SlimOnly

Children of this component will only be rendered when the sidebar **is in slim mode**

#### Tools.SlimProps

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:

```jsx
<Tools.SlimProps
    slimProps={{ size: 'md' }}
>
    <Avatar.Image
        size="lg"
        src={ avatarImg }
    />
</Tools.SlimProps>
```

In the above when the Sidebar becomes `slim` the `AvatarImage`'s `size` prop will be changed to `md`.

### UncontrolledModal

Uncontrolled version of [reactstrap's Modal](https://reactstrap.github.io/components/modals/).

**Props:** *all of the Modal props +*

* `target:string` - id of the trigger element which will show the Modal

#### UncontrolledModal.Close

Element which will close the Modal.

**Props:**

* `tag:string|func` - Component which will be used to represent this trigger

### Uncontrolled Popover

Uncontrolled version of [reactstrap's Popover](https://reactstrap.github.io/components/popovers/).

**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

### UncontrolledTabs

Uncontrolled Tabs container. Should be composed of `UncontrolledTabs.NavLink` and `UncontrolledTabs.TabContent` which are context extended versions of reactstrap's components.

&#x20;**Props:**

* `children:node` - composition of `UncontrolledTabs.NavLink` and `UncontrolledTabs.TabContent`
* `initialActiveTabId:string` - the id of the tab that should be visible at the start

#### UnconctrolledTabs.NavLink

[reactstrap's NavLink](https://reactstrap.github.io/components/navs/#app) for switching the Uncontrolled Tabs.

**Props:** *all of the Popover props +*

* `tabId:string` - id of the corresponding TabContent which should be show when clicked

#### UnconctrolledTabs.TabContent

[reactstrap's TabContent](https://reactstrap.github.io/components/tabs/) connected with the UncontrolledTabs.

**Props:** *all of the TabContent props +*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://webkom.gitbook.io/spin/bootstrap4-additional-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.