❤
npm
Sign UpSign In

es6-react-admin-lte

3.1.0 • Public • Published

AdminLTE with ES6 & React

Welcome to yet another project using the AdminLTE template! This version makes some of the template into a bunch of ReactJS components.

Install it

It is as easy as getting hooked up with any other NPM package! Just open your project in your favourite Node.js-fluent terminal and type:

  npm install es6-react-admin-lte

You are certainly welcome to add your preferred package installation parameters, like --save, of course; and then all that is left to do at this point is bask in the glory of npm's timeless install process!

Using it in your project

NOTE:

For this first iteration of documentation, I'm going to be using ES6 syntax, and JSX formatted components. You might have to wait a bit for another documentation update if you don't use these. Hang in there though, and sorry for the neglect!

Importing to your .js 

  import { YourDesiredComponent } from 'es6-react-admin-lte';

OR importing directly to your .html 

<!-- The necessary JS is in the project's ./dist/js directory -->
  <script src="{project}/node_modules/es6-react-admin-lte/dist/js/es6-react-admin-lte.min.js"></script>

Using your components

Documentation on the components exists in the docs directory of the project, but the formats will usually look like this:

  <YourDesiredComponent
    stringProp="Some string value"
    nonStringProp={500}
    boolPropIsTrue
  >
    {/* child components and content */}
  </YourDesiredComponent>

Using in your .html

NOTE: Check out the index.html file as an example of this stuff in action.

  1. You'll want to import your desired dependencies to your file. For example:

     <!-- The necessary CSS is in the project's ./dist/css directory -->
   <link rel="stylesheet" href="{project}/node_modules/es6-react-admin-lte/dist/css/es6-react-admin-lte.min.css" />
 <!-- Import your desired JS files as well -->
   <script src="./react.js"></script>
 <!-- NOTE:
   We don't provide you with JS and CSS from...
     React,
     jQuery,
     Bootstrap,
     Font Awesome,
     jVectorMap, (for the Map Chart)
     etc.
   Pull them into your project as needed
 -->

  2. You'll want to prepare your <body> for your desired AdminLTE theming and layout with the appropriate classes:

     <body class="skin-blue sidebar-mini"></body>

    • AdminLTE's built-in color themes include:

      skin-blue, skin-purple, skin-yellow, skin-green, skin-red, skin-black, skin-black-light

    • AdminLTE's layout themes include:

      fixed, layout-boxed, layout-top-nav, sidebar-collapse, sidebar-mini

  3. You'll want to add an element to import your template to. Usually a <div> does the trick.

     <div id="project-goes-here"></div>
 <script src="./project-file-that-attaches-there.js"></script>

Components you may enjoy to use

As we develop && document stuff, items on this list will be linked appropriately. Consider this a table of contents && rough progress indicator of done || !done.

  • If item is italicized, it is currently subject to change.
  • If item is not linked, it has no documentation or is not created.
  • If item is Linked, it created and has some documentation, regardless of stability.

Basic Layout Helpers

Utilities

Text

Forms

Charts

Social feed stuff

Tables

Etc.

/es6-react-admin-lte/

    Package Sidebar

    Install

    npm i es6-react-admin-lte

    Weekly Downloads

    17

    Version

    3.1.0

    License

    MIT

    Unpacked Size

    9.81 MB

    Total Files

    251

    Last publish

    Collaborators

    • sourcetoads
    Try on RunKit
    Report malware