React Adminlte Dash

React implementation of AdminLTE themed dashboard 

Based off of AdminLTE. Static hosted demo on GitHub Pages.

Todo (Path to 1.0.0)

    •  Universal/Isomorphic component
    •  Right sidebar
    •  Footer
    •  Content formatting
    •  Generic Navbar dropdowns
    •  Messaging Navbar dropdown
    •  Notifications Navbar dropdown
    •  Tasks Navbar dropdown
    •  Top-nav formatting option
  •  Boxed formatting option

Installation

npm install <span class="token operator">--</span>save react<span class="token operator">-</span>adminlte<span class="token operator">-</span>dash
JavaScript

Usage

This module is in development, usage is subject to change. Not all components are fully functional.

This module uses Styled Components, so all CSS styling is included when the module is called. However, in order for the dashboard to use the entire available screen height, the parent container components must be set to height: 100%. This component sets the html & body styles, the user must set the app container.

In CSS:

#app <span class="token punctuation">{</span>
  min<span class="token operator">-</span>height<span class="token punctuation">:</span> 100vh<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
JavaScript

In ES6:


<span class="token keyword">import</span> <span class="token punctuation">{</span> Dashboard<span class="token punctuation">,</span> Header<span class="token punctuation">,</span> Sidebar <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-adminlte-dash'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> nav <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>
  
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> sb <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">[</span>
  
    
  
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> App <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> children <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
  
    <span class="token punctuation">{</span>children<span class="token punctuation">}</span>
  
<span class="token punctuation">)</span><span class="token punctuation">;</span>
JavaScript

In order to create themed child components (not wrapped in navbarChildren, sidebarChildren, or footerChildren), use the withTheme wrapper provided by styled-components. This will provide the theme object to the child component. See src/styles/variables.js for the available variables. Documentation for these variables is TBD.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.