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

Additional Colors

In addition there are several colors available without a corresponding type

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

Sidebar

Item

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

Props

Header

Header is used to seperate side bar items into multiple groups

Props

Navbar

Menu

Props

MenuEntry

SimpleItem

TaskItem

Item

Content

Main content container for normal and modal content

Props

Box

Props

Col

react-bootstrap Col component

Row

react-bootstrap Row component

Alert

Props

Badge

Props

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

ButtonGroup

Props

Calendar

Work in progress

jQuery full calendar component

Props

Callout

Props

Chatbox - Work in progress

Undocumented use at your own risk

Checkbox

SimpleTable

Props

Column Options

DataTable

Props

Description

Simple wrapper over <dl>

Props

DescriptionItem

Props

DescriptionBlock

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

Props

Divider

Include a divider to give a better distinction between sidebar entries

Infobox

Infobox with icon, text and optional progress information

Props

Infobox2

An alternative info box with similar props but other styling

Props

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

TabContent

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

Props

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

Text

Slider

Checkbox

Radio

Select

Select2

Date

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

Props

DateRange

ICheck