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 |

** NOTE: README is not up-to-date component is still Work In Progress