More

    React Zest: Themes, Features, and Much More

    What is react zest?

    React zest is a multi-purpose premium admin dashboard which can be constructed on the basis of powerful React Framework, Bootstrap4, Reactstrap, and create-react-app. So it gives a unique and elegant look to admin panels. React zest is developer-friendly and easily coded and customized. It has a variety of different themes with tons of pages. 

    It is highly responsive and can adapt to any size of the viewport. So we can find a number of reusable UI components and the latest trending plugins. We can create different types of project applications with this theme. So it is the best source for various niche used applications like Music, CRM, Freelancing, Blogging, ECommerce, etc. 

     

    A basic example of React zest:

     

    import React from ‘react’;

    import Zest from ‘react-zest’;

     

    const SomeComponent = props => {

      return (

        <Zest

          animationName=”wiggle”

          animationTrigger=”hover”

          animationDuration={700}

        >

          <button>Click here!</button>

        </Zest>

      );

    };

     

    export default SomeComponent;

     

    Example of animating an input on error:

     

    import React from ‘react’;

    import Zest from ‘react-zest’;

     

    const SomeComponent = props => {

      constructor(props) {

        super(props);

     

        this.state = {

          input: ”,

          valid: true

        };

      }

     

      checkValidity() {

        if (this.state.input.length < 3) { return this.setState({ valid: false }); }

        return this.setState({ valid: true });

      }

     

      return (

        <Zest

          animationName=”pulse”

          animationTrigger={!this.state.valid}

        >

          <input

            type=”text”

            value={this.state.input}

            onChange={e => this.setState({ input: e.target.value })}

            onBlur={this.checkValidity} />

        </Zest>

      );

    };

     

    export default SomeComponent;

     

    Themes in react zest:

    React zest is best suited for fresh reactjs developers or designers too. It is possible to get multiple admin themes features in one. Zest provides a total of 9 different admin themes. So they are:

    General Admin

    Hospital Admin

    Music Admin

    University Admin

    CRM Admin

    Freelancing admin

    Social Media Admin

    ECommerce admin and 

    Blog Admin

    Features of Zest Admins:

    Zest admins also have multi-layout options. There are two menu styles in zest admins viz. Open Width and Menu width. Even these menus consist of 12 different styles. Not only has this, like the zest menus, App Header too had 12 different style options. It enables us to create our own unique layout using these varieties of menu and header styles. It is possible to create over 250+ unique layouts using this. We can also find a chat bar on zest admins. It has 3 different styles. 

    SASS automatically compiles your CSS file from the project when you want to make changes to it. It is possible to edit all CSS settings like fonts, colors, sizes, etc. in a simple variables file. It is extremely easy to make any changes in your admin styling which is suitable for your brand within a couple of minutes. 

    We can also see different icon fonts like Font Awesome and simple line icon set. Along with these, it is possible to make use of google fonts too which can be configured at times needed. 

    It follows a proper documentation process with complete privacy starting from the first installment till the final production deployment. 

    The most recent version developed till now is Version 1.1.0. It is available from 25th January 2020.

     

    Zest admin-plugins:

    Zest admins have a wide range of integrated plugins and components. Few of the examples listed are,

    Graphical Chart, Mail Box,  Calendar, Widgets, Blogs, Gallery, Pricing tables, Databases, Access and Error Pages, UI elements, Reactstrap components, Date pickers, time pickers, color pickers, etc. 

     

    3rd Part Plugins in Zest:

    We can also find third-party plugins in the admin theme. 3rd party admin-plugins listed are,

    Bootstrap 4, Chart.js, Fonts Awesome Icons, jQuery, jVectormap, Moment, Node SASS, Perfect Scrollbar, React Color Picker, React Slider, React Auto-suggest, React Big Calendar, React Bootstrap Data table, React CKEditor, React Count to, React Data grid, React Date picker, React Date Range picker, React Date time picker, React Wysiwyg editor, React Dropzone,  React Google maps, React input mask, React Masonry gallery, React notification alert, React Numeric Input, React scripts, React Tagsinput, React Time Picker, Reactstrap.

     

    Creating a Dashboard with React:

    The dashboard is a compact monitor that handles all metrics of a company. So it is better to use react as it has a lot of features that can make a dashboard look interactive. It is better to use JSX while writing codes for applications with react. To create a dashboard we need to perform the following steps:

     

    Step 1 Creating an HTML page for the Dashboard including a CSS file:

    HTML code:

     

    <div class=”chart-row”>

        <div id=”country-revenue”></div>

    </div>

     

    <div class=”chart-row”>

    <div id=”monthly-revenue” class=”inline-chart”>

    </div>

    <div id=”product-revenue” class=”inline-chart”>

    </div>

    </div>

     

    CSS code:

     

    .chart-row {

      margin-bottom: 15px;

    }

    .inline-chart {

      display: inline-block;

      width: 48%;

      margin-left: 1%;

    }

     

    Step 2 Creating a React Component:

     

    var DashboardApp = React.createClass({

      render: function() {

    return (

       <div>

         <h1 className=”main-title”>Acme Inc. Revenue Analysis for 2015</h1>

         <div id=”interactive-dashbaord”></div>

         <div className=”chart-row”>

           <div id=”country-revenue”>

             // country revenue chart here

           </div>

         </div>

         <div className=”chart-row”>

              <div id=”monthly-revenue” className=”inline-chart”>

             // chart 2 here – spline

           </div>

           <div id=”product-revenue” className=”inline-chart”>

             // chart 3 here – donut

           </div>

         </div>

       </div>

    );

      }

    });

     

    Step 3 To render the react component into HTML:

     

    React.render(

    <DashboardApp />,

    document.getElementById(“dashboard”)

    );

     

    Step 4 Creating multiple chart components:

    Step 4.1 Preparing Chart data:

     

    [{

    “label”: “Orange”,

    “value”: “90”

    },{

    “label”: “Yellow”,

    “value”: “60”

    }…]

    Step 4.2 Creating a chart configuration:

     

    {

      type: “doughnut2d”,

      renderAt: “product-revenue”,

      width: ‘100%’,

      height: 400,

      dataFormat: “json”,

      dataSource: {

    chart: {

       caption: “Top 5 stores in last month by revenue”,

       theme: “carbon”

    },

    data: [{

            “label”: “Jan”,

            “value”: “657000”

       }, {

            “label”: “Feb”,

            “value”: “138000”

       },

       … {

            “label”: “Dec”,

            “value”: “730000”

       }

    ]

      }

    }

     

    Step 5 Creating chart using react plugin:

     

    <react_fc.FusionCharts {…countryChartConfigs} />

     

    Step 6 Placing the components in JSX dashboard:

     

    <div>

      <h1 className=”main-title”>Acme Inc. Revenue Analysis for 2015</h1>

      <div id=”interactive-dashbaord”></div>

      <div className=”chart-row”>

    <div id=”country-revenue”>

          <react_fc.FusionCharts {…countryChartConfigs} />

    </div>

      </div>

      <div className=”chart-row”>

    <div id=”monthly-revenue” className=”inline-chart”>

          <react_fc.FusionCharts {…monthlyChartConfigs} />

    </div>

    <div id=”product-revenue” className=”inline-chart”>

          <react_fc.FusionCharts {…productChartConfigs} />

    </div>

      </div>

    </div>

     

    Recent Articles

    React Fragment: Find out what we encountered.!

      React Fragment: Hello Devs, in my journey of learning react I came across some frontend conditions where I had to render multiple react components,...

    React Admin: Documentation | Features | Dahboard | Templates

      React Admin is a framework for the front-end development of data-driven applications. That is operating in a browser over the top of REST or...

    React Hooks

      A hook is a component that allows us to use the features of React and state without defining a class. This feature is added...

    React Animation: A definitive guide

    React Animations Add-ons The ReactTransitionGroup add-on is a lower-level Applications Program Interface (API) component for creating react animations. And the ReactCSSTransitionGroup, is a component used...

    Create React App: A Complete guide for Beginners

      Create React App is the modern way of building an official Single Page React Application. It sets up a comfortable environment for building react...

    Related Stories

    Leave A Reply

    Please enter your comment!
    Please enter your name here