@tanyagreen/adminlte-2-react

adminlte-react

Yet another project based on the great AdminLTE Control Panel Template. This is not because of a not invented here syndrom but because the other projects seem not very active or did not meet the expectations I had in using such a react component. The philosophy for this project was to make it as easy as possible to use from a developer standpoint and rework it where I've seen the use to. Currently it does still depend on jQuery here and there (especially the DataTables Component).

Samples can be found under react.sper.at and sourcecode on github

Installation

npm i adminlte-2-react

Hello-World

Easiest to achieve with create-react-app. Create a new project using cra and install adminlte-2-react. Copy this to App.js created by create-react-app

import React, { Component } from 'react';
import AdminLTE, { Sidebar, Content, Row, Col, Box, Button } from 'adminlte-2-react';

const { Item } = Sidebar;

class HelloWorld extends Component {
  state = {}

  render() {
    return (<Content title="Hello World" subTitle="Getting started with adminlte-2-react" browserTitle="Hello World">
      <Row>
        <Col xs={6}>
          <Box title="My first box" type="primary" closable collapsable footer={<Button type="danger" text="Danger Button" />}>
            Hello World
          </Box>
        </Col>
        <Col xs={6}>
          <Box title="Another box">
            Content goes here
          </Box>
        </Col>
      </Row>
    </Content>);
  }
}

class App extends Component {

  sidebar = [
    <Item key="hello" text="Hello" to="/hello-world" />
  ]

  render() {
    return (
      <AdminLTE title={["Hello", "World"]} titleShort={["He", "we"]} theme="blue" sidebar={this.sidebar}>
        <HelloWorld path="/hello-world" />
      </AdminLTE>
    );
  }
}

export default App;

Components

General UI Type/Coloring options

Several components have a property type or color that allows the usage of the following values to give different accents to the component

Types and Colors

Type	Color	ColorCode
default	gray	#d2d6de
primary	light-blue	#3c8dbc
info	aqua	#00c0ef
success	green	#00a65a
warning	yellow	#f39c12
danger	red	#f56954

Additional Colors

In addition there are several colors available without a corresponding type

Color
navy
teal
purple
orange
maroon
black

Icons

AdminLTE makes use of font-awesome icons and ionicons. Since we wanted to stay up to date, we migrated font awesome to version 5.x. Therefore the syntax for icons is no longer fa-icon but instead far/fas/fab-icon. All available icons can be found on the respective websites (font-awesome, ionicons)

AdminLTE

Props

Name	Type	Default	Description
children	node		NavbarMenu, Sidebar and Content Components belong here
title	oneOf: string, [string]	['Admin', 'LTE']	Title in header bar, if an array is supplied the first element will be rendered bold and the second normal
titleShort	oneOf: string, [string]	['Admin', 'LTE']	Title in header bar when the sidebar is collapsed, if an array is supplied the first element will be rendered bold and the second normal
theme	oneOf: 'black-light', 'black', 'blue', 'blue-light', 'green', 'green-light', 'purple', 'purple-light', 'red', 'red-light', 'yellow', 'yellow-light'	'blue'	Colortheme for AdminLTE
browserTitle	string	Untitled	Browsertitle, can be set here globally or for each site indvidually
sidebar	arrayOf: <Item />, <Header />, <li />		Sidebar items

Sidebar

Item

This component is used to render the sidebar entries. Multilevel entries can be achieved by simply passing furhter items as children.

Props

Name	Type	Default	Description
id	string
text	string		Display text of the item
children	<Item />		A nested Item will be displayed as a sublevel item and allows for multilevel menus
icon	icon	'far-circle'	Icon on the left side
to	string	'#'	Relative links should refere to anonther page components path property and absolute links are simple anchors
labels	arrayOf: {small: boolean, color: string, text: string, type:string}		Description for one or more labels
color	string		Iconcolor
isSubItem	boolean		True if its a nested sidebar item, will be set automatically

Header

Header is used to seperate side bar items into multiple groups

Props

Name	Type	Default	Description
text	string		Display text of the item

UserPanel

Include a user information in the sidebar

Props

Name	Type	Default	Description
username	string		Display the username
imageUrl	string		Show a image besides the name
link	string		Include a link to a detail page
status	string		Show the user status
statusType	type		Color the user status

Searchbar

Provide a sitewide search bar inside the sidebar

Props

Name	Type	Default	Description
includeButton	bool		Show search icon/button
onButtonClick	func		On click action
onChange	func		On search change
placeholder	string		Searchfield placeholder
value	string
defaultValue	string

Navbar

It is possible to enhance the top navigation bar with clickable icons and dropdown menus to show additional interactions (e.g. notification bars)

Core

To use the navbar menu you have to wrap Entries with the Core component

<Navbar.Core>
  <Entry
    icon="fas-envelope"
  >
    <MessageItem>
    ...
  </Entry>
</Navbar.Core>

Entry

An entry is the component rendered inside the navbar it can be either used as an additional button (e.g. for logout actions) or as an menu opener rendering components of type MessageItem, NotificationItem, TaskItem. Additionally an colored label can be attached indicating that several actions are behind the menu. If it should act as an button provide the onClick prop otherwise provide some children to use it as an menu.

Name	Type	Default	Description
icon	icon		Entry icon
labelType	type		Label accent
labelValue	number		Label value displayed on top right of entry. If you provide no value, the value is calculated as the number of nested children, to disable the label in this case provide a value of 0
headerText	string		Text above menu items in opened state
footerText	string		Text bellow menu items in opened state
onFooterClick	function		Action triggered on footer click
className	string		Additional classes
children	oneOf: NotificationItem, TaskItem, MessageItem		Additional classes
onClick	function		On click action

NotificationItem

A simple notification style navbar list item with icon

Name	Type	Default	Description
icon	icon		Icon left of text
iconColor	color		Icon color
text	string		Item text
to	string		React dom route
onClick	function		On click action

TaskItem

Navbar item with progressbar

Name	Type	Default	Description
value	number		Progress value
barColor	color		Progressbar color
text	string		Item text
to	string		React dom route
onClick	function		On click action
min	number	0	Progress minimum value
max	number	100	Progress maximum value

MessageItem

Instant message style notification

Name	Type	Default	Description
text	string		Item text
subText	string		Additional text
imageUrl	string		User image link
imageAlt	string		User image link
onClick	function		On click action
when	momentObject		Progress minimum value
whenFormats	object	{ minutes: 'mins', hours: 'hours', today: 'today', yesterday: 'yesterday', days: 'DD.MM.YYYY', }	Alternative namings for when annotation in item

Content

Main content container for normal and modal content

Props

Name	Type	Default	Description

Box

Props

Name	Type	Default	Description
id	string
title	string		Boxtitle
collapsable	boolean	false	Toggles the possibility to minimize
closable	boolean	false	Toggles the possibility to close a box
header	node		Content to be rendered in the header position of the box
footer	node		Content to be rendered in the footer position of the box
type	type		Box accent
options	node		Icon with options placed next to the close, collapse icons
icon	icon		Boxicon
titleRight	boolean	false	Right align box title
loaded	boolean	true	Loading spinner for ajax content
noPadding	boolean	false	Removes box padding for tighter fitting
badge	Badge, arrayOf: Badge		Badge(s) placed in header
toolIcon	icon	wrench	Custom icon for tools menu
customOptions	node		Options for tool menu in header
className	string
footerClass	string		custom className for the footer region
collapsed	boolean	false	Initial collapsed state
solid	boolean	false	Solid box styling option
textCenter	boolean	false	Centered text styling in body
padding	boolean	false	Additional body padding
bodyClassName	string		custom className for the body region
border	boolean	false	Visible border around box
style	style	null	Inline style info for the box
children	node		Box content rendered in body

Col

react-bootstrap Col component

Row

react-bootstrap Row component

Alert

Props

Name	Type	Default	Description
id	string
closable	boolean	false	Make alert closable
type	type		Alert acent
icon	icon		Icon display left to text
title	string		Alert title
children	node		Alert content

Badge

Props

Name	Type	Default	Description
id	string
color	color		Badge color
text	string		Badge text

Button

As mentioned in react-bootstrap, React does not render new elements on new lines thus buttons side by side will be rendered without margin, to counteract that you can wrap your <Button/>'s with <ButtonGroup />

Props

Name	Type	Default	Description
id	string		Button id
size	oneOf: 'xs', 'sm', 'md', 'lg'		Button size
type	type	default	Button accent
block	boolean		Display as block
icon	icon		Button icon
color	color		Button color can be used instead of type
classes	string		Button additional button classes
flat	boolean	false	Flat button styling
text	string		Button text
pullRight	boolean	false	Pull button right
pullLeft	boolean	false	Pull button left
disabled	boolean	false	Disable button
margin	boolean	false	Additional margin around button
to	string	false	Button link, relative uri's should be valid router routes
app	boolean	false	App button styling
outline	boolean	false	Button outline styling
badge	Badge, arrayOf: Badge		Badge placed in button
onClick	function		On click action
split	boolean	false	Split button and submenu
children	node		Button submenu entries

ButtonGroup

Props

Name	Type	Default	Description
pullRight	boolean	false	Pull button group right
margin	boolean	false	Additional margin around button group
vertical	boolean	false	Vertical align button group
children	<Button />		Button rendered in group

Calendar

Work in progress

jQuery full calendar component

Props

Name	Type	Default	Description

Callout

Props

Name	Type	Default	Description
id	string
type	type		Callout accent
title	string		Callout title
children	node		Callout content

Chatbox - Work in progress

Undocumented use at your own risk

Checkbox

SimpleTable

Props

Name	Type	Default	Description
data	array		Array of objects matching the column description
columns	array		Column descriptions, see next table for reference
condensed	bool	false	Compact data layout
striped	bool	false	Alternate row coloring
noMargin	bool	false	Removes table margin
border	bool	false	Show borders around cells
responsive	bool	false	Resize table of window resize
hover	bool	false	Highlight hovered rows

Column Options

Name	Type	Default	Description
title	string		Column title
data	string		Data property containing the data to be rendered in the column
width	string		Use this prop to give the column a fixed width
render	function		Custom render function for the column with arguments (data, rowData, rowIndex)

DataTable

Props

Name	Type	Default	Description
options	object		Array of objects matching the column description
ajaxMap	function		Allows custom argument mapping for ajax based data source, equivalent to on('preXhr.dt')
ajaxResponseMap	function		Mapping function for data retrieved on ajax based data source, equivalent to on('preXhr.dt')
data	array		Array of objects matching the column description
columns	array		Column descriptions, see next table for reference
setDataTableRef	function		Callback that gets passed the datatable api() ref
onSelect	function		Callback after row gets selected - arguments (rowdata)
onDeselect	function		Callback after row deselect - arguments (rowdata)
footer	bool	false	Renders column headers on bottom of table
hover	bool	false	Highlight hovered rows
border	bool	false	Show borders around cells
condensed	bool	false	Compact data layout
striped	bool	false	Alternate row coloring
noMargin	bool	false	Removes table margin
responsive	bool	false	Resize table of window resize
selectedRows	[object]		Allows passing in the currently selected rows
onClickEvents	object		Row level bound click events based on class on cell dom element. Example render: (data) => ``<div class="on-click-event">${data}</div>``' will bind to an object {onClickEvent: (data, rowIndex, rowData) => {console.log("do stuff with row data")}}
page	number		Active page, can be left empty if uncontrolled
totalElements	func		Passing this property or hasMore makes this component controlled, therefore pageSize, pageChange and orderChange props should be provided too
pageSize	number		Allows passing in the currently selected rows
onPageChange	func		Page change event handler
onOrderChange	func		Order change event handler
hasMore	bool		If you control data externally and are not exactly aware if additional pages exist you can provide hasMore instead to indicate if more data exists
order	[object]		Allows passing in the currently selected rows
searchValue	string		Search value for datatable search field
onSearchChange	func		Search value change event

Order props

Name	Type	Default	Description
title	string		Column title
data	string		Data property containing the data to be rendered in the column
width	string		Use this prop to give the column a fixed width
render	function		Custom render function for the column with arguments (data, rowData, rowIndex)

Description

Simple wrapper over <dl>

Props

Name	Type	Default	Description
id	string
horizontal	bool	false	Will render the list horizontal

DescriptionItem

Props

Name	Type	Default	Description
text	string
label	string
noText	bool	false	Use this if you only want to render a label

DescriptionBlock

A block content element containing several text elements (text and header) a percentage description and indicator.

Props

Name	Type	Default	Description
id	string
percentage	number
percentageColor	color
header	string
text	string
indication	oneOf: left, right, up, down

Divider

Include a divider to give a better distinction between sidebar entries

Infobox

Infobox with icon, text and optional progress information

Props

Name	Type	Default	Description
id	string
icon	icon
text	string
number	string		Bold text displayed in center, usually a number
color	color
progress	number
progressText	string
iconColorOnly	string		Alternate styling that colors only the icon instead of the entire box

Infobox2

An alternative info box with similar props but other styling

Props

Name	Type	Default	Description
id	string
icon	icon
color	color
title	string
subTitle	string
text	string
footerText	string
footerIcon	icon	fas-arrow-alt-circle-right
onFooterClick	function		Callback on footer click
to	route		Can be used instead of onFooterClick to route instead to another page directly

Label

LoadingSpinner

LoginCore

Margin

Memberbox

NavList

NavListItem

Pagination

ProductList

ProductListItem

ProgressBar

ProgressGroup

Sparkbar

SparklineBox

Tabs

Wrapper around react-bootstrap tabs, this can be either used as uncontrolled tabs by providing a defaultActiveKey property or a controlled tabs using activeKey and onSelect props

Props

Name	Type	Default	Description
id	string
activeKey	string		Currently active tab, if you provide an activeKey you should also provide an onSelect event handler prop
defaultActiveKey	string		Initially active tab, similar to react behaviour of defaultValue on <input> components this prop provides an inital state for uncontrolled tabs
onChange	function		Event handler fired when a tab is changed
children	TabContent		Provide multiple TabContent as child to render anything in tabs
pullRight	bool	false	Pulls the tab header to the right side
contentHeight	string		If the content height varies you can provide a fixed height to prevent moving elements when changing between tabs
mountOnEnter	false		Adds the tab content to react's virtual dom at the first them it is selected
unmountOnExit	false		Removes inactive tabs from react virtual dom
icon	icon		Header icon besides the title
title	string
titleLeft	bool	false	Pulls the title to the left side when using the pullRight property

TabContent

Use TabContent in conjuction with Tabs to actually provide the tabular content

Props

Name	Type	Default	Description
eventKey	string		Unique key used by Tabs to identify the currently active tab
children	node		Tabular content

Forms

A various of different form elements, ranging from simple default html forms (Text, Radio, Select, Checkbox) to advanced components based on jQuery Widgets like Select2, ICheck used by the original adminlte template and pure react based inputs like Date, DateRange (based on react-dates), Slider (based on rc-slider) and other components. All form components should behave like original react inputs with defaultValue's and onChange passing more or less pure Javascript event objects to make it possible to work with libraries like Formik. Note that all form elements are not directly exported by AdminLTE instead you should import Inputs and destructure the required elements.

import AdminLTE, { Inputs } from 'adminlte-2-react';

const { Select2, Date, DateTime, Text } = Inputs;
...

All form elements are wrap in the Component InputWrapper with various styling options such as icons, radio buttons, therefore all following props are shared between all form elements. If you want to add an additional element you can also wrap it with InputWrapper to fit it smooth into the styling of all other elements. Additional all inputs share the same labeling props to keep a similar styling.

The following InputWrapper and Label props are shared within all of adminlte-2-react input components

InputWrapper Props

Name	Type	Default	Description
iconLeft	icon		Icon left of element
iconRight	icon		Icon right of element
addonLeft	string, node		Any content left of element
addonRight	string, node		Any content right of element
size	oneOf: 'xs', 'sm', 'md', 'lg'		Inputform size
checkboxLeft	bool		Checkbox left of element
checkboxLeftProps	object		Props for checkbox left of element
checkboxRight	bool		Checkbox right of element
checkboxRightProps	object		Props for checkbox right of element
radioLeft	bool		Radio left of element
radioLeftProps	object		Props for radio left of element
radioRight	bool		Radio right of element
radioRightProps	object		Props for radio right of element
buttonLeft	node		Button rendered left of element
buttonRight	node		Button rendered right of elemet
children	node
width	string		Fixed inputfield width
help	string		Help text bellow input element

Label Props

Name	Type	Default	Description
label	node		Label for form element, can be a simple string or a more complex JSX component
labelIcon	icon		Icon next to label
labelPosition	oneOf: above, left, none	left
labelClass	string		Additional label classes
type	type		Input element accent
name	string		Name property for screenreaders
labelXs	number (0-12)		Bootstrap label column width, does only work when labelPosition left is used
labelSm	number (0-12)		Bootstrap label column width, does only work when labelPosition left is used
labelMd	number (0-12)		Bootstrap label column width, does only work when labelPosition left is used
labelLg	number (0-12)		Bootstrap label column width, does only work when labelPosition left is used
xs	number (0-12)		Bootstrap input element column width, does only work when labelPosition left is used
sm	number (0-12)		Bootstrap input element column width, does only work when labelPosition left is used
md	number (0-12)		Bootstrap input element column width, does only work when labelPosition left is used
lg	number (0-12)		Bootstrap input element column width, does only work when labelPosition left is used

Text

Slider

A slider component that can be used either as a single slider or a (multi) range slider, it is based on rc-slider. As with most other components, the most import props/usedful props are directly exposed. All other props can be passed to the wrapped component using the rcSliderProps property.

Props

Name	Type	Default	Description
color	color	'light-blue'
defaultValue	number
value	number
onChange	func
tooltipRender	func(value)		Custom tooltip render function
tooltipVisible	oneOf: 'always', 'dragging', 'never'		Custom tooltip render function
handle	element		Pass a custom handle directly to rc-slider
rcSliderProps	object		Pass any other rc-slider prop directly to rc-slider, see documentation

Checkbox

Simple unstyled checkbox

Props

Name	Type	Default	Description
text	string		text next to checkbox
onChange	func
disabled	bool	false
name	string
value	oneOf: string, number		Value returned when box is checked

Radio

Select

Select2

This component is based on the popular jQuery select2 plugin. It has some improvements and events and select options are adjusted to provide a uniformal coding experience instead of dealing with ever changing api's. Additionally it is possible to provide an externally controlled datasource using onDataFetch callback.

Props

Name	Type	Default	Description
id	string		Component id
select2Options	object		Provide additional select2 options for the jQuery widget, see the select2 homepage for the entire documention of those features
multiple	bool		Allow multiple value selection
options	[object]		All available options
value	number, string, [number], [string]		Selected values
defaultValue	number, string, [number], [string]		defaultValue selected values
disabled	bool	false
name	string		Name of <input> html field
allowClear	bool	false	Allow empty field value
onChange	function		On change event handler
onBeforeClose	function		On before option select handler
onClose	function		On after option select handler
onBeforeOpening	function		On before option select open handler
onOpen	function		On after option select open handler
onBeforeSelect	function		On before option selection handler
onSelect	function		On option selection handler
onBeforeUnselect	function		On before option deselect handler
onUnselect	function		On option deselect handler
onFetchData	function({page, searchValue}, success(data), failure())		On data fetch handler, arguments are an object with page no and searchValue current search term, a success callback that should be called with new data and a failure handler on fail
fetchDataDelay	number	100	Delay before onFetchData is being call when entering a search value, to prevent overfetching of data

Date

This component in combination with DateRange is heavily based on react-dates with additional simplification and styling based on admin-lte. It should replace bootstrap-datepicker component in the original theme with a pure react alternative. The most common props are directly exposed on the Date component, additional props can be passed by using the dateProps property. The full documentation of available props can be found in react-dates SingleDatePicker documentation

Props

Name	Type	Default	Description
type	type		Calendar accent
value	string, moment object		You can either pass in a string in combination with the format property or an already converted moment.js object, as the original this component used moment as its internal representation. Note that the onChange event will always return a string
format	string		Format string based on moment.js formatting rules
onChange	function		On change event handler
onFocusChange	function		On focus change event handler
name	string		Name that behaves like <input> name prop
placeholder	string
disabled	bool	false
required	bool	false
readOnly	bool	false
screenReaderInputMessage	bool	false
showClearDate	bool	false
customCloseIcon	node
showDefaultInputIcon	bool	false
customInputIcon	bool	false
noBorder	bool	false
block	bool	false
small	bool	false
regular	bool	false
inputIconPosition	string
dateProps	object		Additional SingleDateProps that are not directly exposed, see react-dates SingleDatePicker documentation

DateRange

DateTime

ICheck