react-menthol v0.1.2

react-menthol

React dom elements extensively used while creating components.

To install using npm or yarn

npm install react-menthol --save;
or 
yarn add react-menthol;

Usage

import { Error, Loading, Maintenance, NoData, Tooltip, Legend } from 'react-menthol';
import 'react-menthol/menthol.css';

Packages

• Error
• Loading
• Maintenance
• NoData
• Tooltip
• Legend

Error

This component is used to show/hide a clean representation for error msg.

import { Error } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Error             
            error="Pass the error over here"
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

You can pass classes also as a prop

Loading

This generic component is used for displaying loading icon on the doms when needed. It has two features to either use a existing set of svg elements or use a image to show loading.

import { Loading } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Loading             
                loadSvg= false
                svgType='balls'
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

Maintenance

This Component is used when its parent is still under development/not available at the moment

import { Maintenance } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Maintenance             
            heading= `We'll be back soon!`
            paragraph= `Sorry for the inconvinence,but we're performing some maintenance at the moment`
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

NoData

This generic component is used in the components to show beautifully when the data is empty.

import { NoData } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <NoData             
            heading= `No Matching items found!`,
            paragraph= `check the settings or refresh `,
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

Tooltip

This is a generic component for tooltip, which accepts

• array of objects with keys as key, alias and color
• dataObj which contains actual data The data passed is looped and check if the key is present in dataObj then it will display.
• An additional prop of heading can also be added to show the heading of tooltip
• Tooltip data can also be array of strings representing the key names from dataObj that needs to be displayed.

Note This is just a generic comp, user needs to position this tooltip accordingly to its usage

import { Tooltip } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Tooltip             
		    data = [ {key : x, alias:"Xvalue", color:"black"},{key : y, alias:"Yvalue", color:"black"}]
		    dataObj= { x: 1, y:2 ,z: 4 }
		    heading= "",
		/>
        </div>
      document.getElementById( 'app' ) 
);

Params passed

Legend

• Generic component used to show the legend in horizontal or vertical format
• Data contains objects with keys as key, color, active
• Each key will be displayed and a color box is shown below it
• active prop is used to toggle legend , and can be accessed through onClick function and maintain whether its active or not

import { Legend } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Legend             
                layout= "horizontal"
			    data = [{ key: "Example1", color:"#FFFFFF", active: true },
                { key: "Example2", color:"#000000", active: true }]
		        onClick = {this.handleClick}
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

For local development/demo

For building

npm run build

For Demo

npm run demo

go to file system and locate the react-menthol/demo/index.html

Icons used from react-icons