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
npm i adminlte-2-react
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;
Several components have a property type
or color
that allows the usage of the following values to give different accents to the component
Type | Color | ColorCode |
---|---|---|
default |
gray |
#d2d6de |
primary |
light-blue |
#3c8dbc |
info |
aqua |
#00c0ef |
success |
green |
#00a65a |
warning |
yellow |
#f39c12 |
danger |
red |
#f56954 |
In addition there are several colors available without a corresponding type
Color |
---|
navy |
teal |
purple |
orange |
maroon |
black |
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)
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 |
This component is used to render the sidebar entries. Multilevel entries can be achieved by simply passing furhter items as children.
Name | Type | Default | Description |
---|---|---|---|
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 is used to seperate side bar items into multiple groups
Name | Type | Default | Description |
---|---|---|---|
text | string | Display text of the item |
It is possible to enhance the top navigation bar with clickable icons and dropdown menus to show additional interactions (e.g. notification bars)
To use the navbar menu you have to wrap Entries
with the Core component
<Navbar.Core>
<Entry
icon="fas-envelope"
>
<MessageItem>
...
</Entry>
</Navbar.Core>
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 |
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 |
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 |
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 |
Main content container for normal and modal content
Name | Type | Default | Description |
---|
Name | Type | Default | Description |
---|---|---|---|
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 |
react-bootstrap Col
component
react-bootstrap Row
component
Name | Type | Default | Description |
---|---|---|---|
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 |
Name | Type | Default | Description |
---|---|---|---|
color | color | Badge color | |
text | string |
Badge text |
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 />
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 |
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 |
Work in progress
jQuery full calendar component
Name | Type | Default | Description |
---|
Name | Type | Default | Description |
---|---|---|---|
type | type | Callout accent | |
title | string |
Callout title | |
children | node |
Callout content |
Undocumented use at your own risk
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 |
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) |
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 |
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) |
Simple wrapper over <dl>
Name | Type | Default | Description |
---|---|---|---|
horizontal | bool |
false |
Will render the list horizontal |
Name | Type | Default | Description |
---|---|---|---|
text | string |
||
label | string |
||
noText | bool |
false | Use this if you only want to render a label |
A block content element containing several text elements (text
and header
) a percentage description and indicator.
Name | Type | Default | Description |
---|---|---|---|
percentage | number |
||
percentageColor | color | ||
header | string |
||
text | string |
||
indication | oneOf: left , right , up , down |
Include a divider to give a better distinction between sidebar entries
Infobox with icon, text and optional progress information
Name | Type | Default | Description |
---|---|---|---|
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 |
An alternative info box with similar props but other styling
Name | Type | Default | Description |
---|---|---|---|
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 |
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
Name | Type | Default | Description |
---|---|---|---|
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 | |
id | string |
||
icon | icon | Header icon besides the title | |
title | string |
||
titleLeft | bool |
false | Pulls the title to the left side when using the pullRight property |
Use TabContent in conjuction with Tabs
to actually provide the tabular content
Name | Type | Default | Description |
---|---|---|---|
eventKey | string |
Unique key used by Tabs to identify the currently active tab |
|
children | node |
Tabular content |
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
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 |
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 |
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.
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 |
This component in combination with DateRange
is heavily based on react-dates with additional simplification and styling based on adminlte. 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
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 |