@falorun/personal-react-toolkit NPM

Documentation

Welcome to My React Component ToolKit !

See documentation below for more informations.

tips: This lib is under development.

Installation

$ npm i @falorun/personal-react-toolkit

You can now import in your component file :

import { Button } from "@falorun/personal-react-toolkit";

const MyComponent: React.FC<YourPropsTypes> = (props) => {
  return <Button> {props.foo} </Button>;
};

export default MyComponent;

Doc By Component

Buttons

Props with ? is are optional

Props	Expected	Default	Comments
variant	"rounded", "square", "slight-rounded", "empty", "icon";	"square"	Set the type of button you want
bold?	Boolean	False	If you want the button text to be bold (customizable with className)
color?	"red", "blue", "green", "orange", "purple", "black", "white"	"white"	Text color of the button
bgColor?	same as above	"blue"	The background color of the button
size?	"small", "standard", "big"	"standard"	"The size of the button (cust. with className)"
icon?	the name of icon (see material design icons)	"MdClose"	The button can have an icon
-	-	-	-

Box

Props	Expected	Default	Comments
centered	boolean	true	Childrens will be centrered
column	boolean	true	Childrens will be column
maxWidth?	string ex: "200px"	300px	Box max width
-	-	-	-

Card

Props	Expected	Default	Comments
direction	"column", "row"	"column"	Flex direction of the card
clickable?	boolean	false	The card will have an animation that show it is clickable
-	-	-	-

Container

Props	Expected	Default	Comments
fluid?	boolean	true	The container will take the whole width
-	-	-	-

Form

WIP

Props	Expected	Default	Comments

Icon

Props	Expected	Default	Comments
name	string (see Material Design icons)	MdClose	A simple svg icon
-	-	-	-

Input

Props	Expected	Default	Comments
variant	"filled", "standard", "square"	"square"	Define the input's variant
labelTitle?	string	-	input's label
error?	string	-	The error will be shown below the input
isError?	boolean	false	If error, input will be shown this errors
inputSize?	"big", "standard", "small"	"standard"	Size of the input
value	string	-	Value of the input
-	-	-	-