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
-	-	-	-

Menu

Props	Expected	Default	Comments
isShow	boolean	-	Show the menu
-	-	-	-

Popup

Props	Expected	Default	Comments
isError?	boolean	-	Popup Style
iconName?	string (see material design icons)	-	-
isShow	boolean	-	Show the popup or not
handleClose	func	-	Function on Close
-	-	-	-

Title

Props	Expected	Default	Comments
variant	"small", "standard", "big"	"standard"	Title variant
-	-	-	-

Tooltip

Props	Expected	Default	Comments
title	string	-	The title of the tooltip
position?	"top", "bottom"	"top"	-

Warnings

• This toolkit is under development, you can encounter some mistakes.
• All Components still under dev too.