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.