@microalien/ui NPM

Microalien UI Library

@microalien/ui is a UI React Component Library created by Microalien Pvt.Ltd for creating better responsive UI for React Projects.

Installation

use npm or yarn to install @microalien/ui package

    npm -i @microalien/ui
    or
    yarn add @microalien/ui

Usage

Flex

    import {Flex} from '@microalien/ui'

    return(
        <Flex>
        //Content
        </Flex>
    )

Props

Prop	DataType	Required	Default Value	Option	Description
width	`number or array of numbers`	`optional`	`undefined`	`0.1 - 1`	for change the flex width unresponsively
justifyContentCenter	`Boolean`	`optional`	`undefined`		justify-content: center
justifyContentFlexStart	`Boolean`	`optional`	`undefined`		justify-content: flex-start
justifyContentFlexEnd	`Boolean`	`optional`	`undefined`		justify-content: flex-end
justifyContentSpaceBetween	`Boolean`	`optional`	`undefined`		justify-content: space-between
justifyContentSpaceAround	`Boolean`	`optional`	`undefined`		justify-content: space-around
justifyContentSpaceEvenly	`Boolean`	`optional`	`undefined`		justify-content: space-evenly
alignItemsCenter	`Boolean`	`optional`	`undefined`		align-items: center
alignItemsFlexStart	`Boolean`	`optional`	`undefined`		align-items: flex-start
alignItemsFlexEnd	`Boolean`	`optional`	`undefined`		align-items: flex: end
wrap	`Boolean`	`optional`	`undefined`		flex-wrap: wrap
column	`Boolean`	`optional`	`undefined`		flex-direction: column
rowReverse	`Boolean`	`optional`	`undefined`		flex-direction: row-reverse
columnReverse	`Boolean`	`optional`	`undefined`		flex-direction: column-reverse
m	`number or array of numbers`	`optional`	`undefined`		to provide margin
mt	`number or array of numbers`	`optional`	`undefined`		to provide margin top
mr	`number or array of numbers`	`optional`	`undefined`		to provide margin right
mb	`number or array of numbers`	`optional`	`undefined`		to provide margin bottom
ml	`number or array of numbers`	`optional`	`undefined`		to provide margin left
mx	`number or array of numbers`	`optional`	`undefined`		to provide margin horizontally
my	`number or array of numbers`	`optional`	`undefined`		to provide margin vertically
p	`number or array of numbers`	`optional`	`undefined`		to provide padding
pt	`number or array of numbers`	`optional`	`undefined`		to provide padding top
pr	`number or array of numbers`	`optional`	`undefined`		to provide padding right
pb	`number or array of numbers`	`optional`	`undefined`		to provide padding bottom
pl	`number or array of numbers`	`optional`	`undefined`		to provide padding left
px	`number or array of numbers`	`optional`	`undefined`		to provide padding horizontally
py	`number or array of numbers`	`optional`	`undefined`		to provide padding vertically
onClick	`Function`	`optional`	`undefined`		to provide onClickevent