Getting Started

You can install Reaction-ui from npm using

npm install --save reaction-ui
npm install --save reaction-ui

Components

import { ComponentName } from 'reaction-ui';
import { ComponentName } from 'reaction-ui';

Avatars

Avatar can be used to display a user.

<Avatar type="boy" size={120}/>
<Avatar type="boy" size={120}/>

Props

Name	Type	Description
type	String : ['boy','girl']	Specifies the type of default avatar type (required)
size	Number	Defines the size of the avatar
src	String	Specifies the path/link for the image

Buttons

A button is a way to ask users for action

Primary Button

<PrimaryButton shadow borderRadius={4}>Hello World</PrimaryButton>
<PrimaryButton shadow borderRadius={4}>Hello World</PrimaryButton>

Example

import { FaBeer } from "react-icons/fa";

<PrimaryButton shadow borderRadius={4} iconRight>
    Drink Beer
    <FaBeer />
</PrimaryButton>
import { FaBeer } from "react-icons/fa";
<PrimaryButton shadow borderRadius={4} iconRight>
    Drink Beer
    <FaBeer />
</PrimaryButton>

Props

Name	Type	Description
fontFamily	String	Defines the font style in the button
fontWeight	Number	Defines the weight of the font in button
fontSize	Number	Specifies the size of the fonts in pixels
borderRadius	Number	Corner radius of the button
color	String:[Hex Code]	Color of the font/icon in button
bgColor	String:[Hex Code]	Background Color of the button
shadow	Boolean	Shadow for the button
iconRight	Boolean	To add icon on right side of text for button
iconLeft	Boolean	To add icon on left side of text for button

Secondary Button

<SecondaryButton>Back</SecondaryButton>
<SecondaryButton>Back</SecondaryButton>

Props

Name	Type	Description
fontFamily	String	Defines the font style in the button
fontWeight	Number	Defines the weight of the font in button
fontSize	Number	Specifies the size of the fonts in pixels
borderRadius	Number	Corner radius of the button
color	String:[Hex Code]	Color of the font/icon in button and border
bgColor	String:[Hex Code]	Background Color of the button on Hover
hoverColor	String:[Hex Code]	Color for the button on Hover
iconRight	Boolean	To add icon on right side of text for button
iconLeft	Boolean	To add icon on left side of text for button

Ghost Button

<GhostButton>Cancel</GhostButton>
<GhostButton>Cancel</GhostButton>

Props

Name	Type	Description
fontFamily	String	Defines the font style in the button
fontWeight	Number	Defines the weight of the font in button
fontSize	Number	Specifies the size of the fonts in pixels
color	String:[Hex Code]	Color of the font/icon in button and border

Icon Button

<IconButton bgColor="#2d2d2d" color="#fff" >
    <ThunderBoltIcon />
</IconButton>
<IconButton bgColor="#2d2d2d" color="#fff" >
    <ThunderBoltIcon />
</IconButton>

Props

Name	Type	Description
size	Number	Specifies the size of the icon in pixels
borderRadius	Number	Corner radius of the button
color	String:[Hex Code]	Color of the icon
bgColor	String:[Hex Code]	Background Color of the button on Hover/Background
shadow	Boolean	Shadow for the button

Inputs

A button is a way to ask users for action

Text Box

<TextBox type="text" placeholder="Placeholder Text" />
<TextBox type="text" placeholder="Placeholder Text" />

Props

Name	Type	Description
fontFamily	String	Defines the font style in the button
fontWeight	Number	Defines the weight of the font in button
fontSize	Number	Specifies the size of the fonts in pixels
borderRadius	Number	Corner radius of the button
color	String:[Hex Code]	Color of the font/icon in button
bgColor	String:[Hex Code]	Background Color of the button
fullWidth	Boolean	Defines the 100% width of input

Text Area

<TextArea rows={5} cols={64} placeholder="Placeholder Text" />
<TextArea rows={5} cols={64} placeholder="Placeholder Text" />

Props

Name	Type	Description
fontFamily	String	Defines the font style in the button
fontWeight	Number	Defines the weight of the font in button
fontSize	Number	Specifies the size of the fonts in pixels
borderRadius	Number	Corner radius of the button
color	String:[Hex Code]	Color of the font/icon in button
bgColor	String:[Hex Code]	Background Color of the button

Checkbox

<CheckBox size={22} defaultChecked />
<CheckBox size={22} defaultChecked />

Props

Name	Type	Description
size	Number	Specifies the size of the Checkbox pixels
borderRadius	Number	Corner radius of the Checkbox
checkmarkColor	String:[Hex Code]	Color of the checkmark in checkbox
bgColor	String:[Hex Code]	Background Color of the Checkbox
hoverBg	String:[Hex Code]	Background Color of the Checkbox on Hover event
bgOnCheck	String:[Hex Code]	Background Color of the Checkbox after checked
defaultChecked	Boolean	To check the box by default

Toggle

<Toggle size={38} />
<Toggle size={38} />

Props

Name	Type	Description
size	Number	Specifies the size of the Checkbox pixels
switchColor	String:[Hex Code]	Color of the switch/thumb
toggleOffColor	String:[Hex Code]	Color of toggle when OFF
toggleOnColor	String:[Hex Code]	Color of toggle when ON
defaultChecked	Boolean	To keep toggle ON default

Layouts

Pure Layout of CSS FlexBox and 12 Column Grid

Stack

<Stack justify="space-between">
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
</Stack>
<Stack justify="space-between">
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
    <div className="box" ></div>
</Stack>

Props

Name	Type	Description
fullWidth	Boolean	Defines the 100% width of div
justify	String	Justify the flex items
items	String	Aligns the flex items on cross axis
direction	String	Direction of the Flex Container
padding	Number	Padding of the Flex Container
gap	Number	Gap between the flex items

Grid

<Grid justify="space-between" rowGap={10}>
    <Row colGap={10}>
        <Column start={1} end={6}>
            <div className="slab"></div>
        </Column>
        <Column start={6} end={13}>
            <div className="slab"></div>
        </Column>
    </Row>
    <Row colGap={10}>
        <Column start={1} end={4}>
            <div className="slab"></div>
        </Column>
        <Column start={4} end={5}>
            <div className="slab"></div>
        </Column>
        <Column start={5} end={13}>
            <div className="slab"></div>
        </Column>
    </Row>
</Grid>
<Grid justify="space-between" rowGap={10}>
    <Row colGap={10}>
        <Column start={1} end={6}>
            <div className="slab"></div>
        </Column>
        <Column start={6} end={13}>
            <div className="slab"></div>
        </Column>
    </Row>
    <Row colGap={10}>
        <Column start={1} end={4}>
            <div className="slab"></div>
        </Column>
        <Column start={4} end={5}>
            <div className="slab"></div>
        </Column>
        <Column start={5} end={13}>
            <div className="slab"></div>
        </Column>
    </Row>
</Grid>

Props

Name	Type	Description
rowGap	Number	Gap between the Gird Row
colGap	Number	Gap between the Gird Column
start	Number	Applied only on Column to specify start grid line
end	Number	Applied only on Column to specify end grid line

Fonts

Custom Fonts

Fonts

<Font fontFamily="Ligconsolata" fontWeight="bolder">() => This is a Custom Font</Font>
<Font fontFamily="Ligconsolata" fontWeight="bolder">() => This is a Custom Font</Font>
() => This is a Custom Font

Props

Name	Type	Description
fontFamily	String	Defines the font style
fontWeight	Number	Defines the weight of the font
fontSize	Number	Specifies the size of the fonts in pixels
borderRadius	Number	Corner radius of the backDrop
color	String:[Hex Code]	Color of the font
backDrop	String:[Hex Code]	Color of the back drop