# @falorun/personal-react-toolkit > En cours de rédaction Latest version **0.1.10** (published 2021-02-05) · ISC license · 0 weekly downloads ## Install ```sh npm install @falorun/personal-react-toolkit pnpm add @falorun/personal-react-toolkit yarn add @falorun/personal-react-toolkit bun add @falorun/personal-react-toolkit ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.10 | | Published | 2021-02-05 | | First published | 2021-02-04 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 18 | | Unpacked size | 728.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Nicolas Baudvin | | Maintainers | falorun | ## Links - npm: https://www.npmjs.com/package/@falorun/personal-react-toolkit - Repository: https://github.com/Nicolas-Baudvin/ui-react-toolkit - Homepage: https://github.com/Nicolas-Baudvin/ui-react-toolkit#readme - Issues: https://github.com/Nicolas-Baudvin/ui-react-toolkit/issues - npm.io page: https://npm.io/package/@falorun/personal-react-toolkit ## Dependencies (18) - [react](https://npm.io/package/react.md) ^17.0.1 - [react-dom](https://npm.io/package/react-dom.md) ^17.0.1 - [react-jss](https://npm.io/package/react-jss.md) ^10.5.0 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [typescript](https://npm.io/package/typescript.md) ^4.0.3 - [web-vitals](https://npm.io/package/web-vitals.md) ^0.2.4 - [@types/jest](https://npm.io/package/@types/jest.md) ^26.0.15 - [@types/node](https://npm.io/package/@types/node.md) ^12.0.0 - [react-icons](https://npm.io/package/react-icons.md) ^4.1.0 - [caniuse-lite](https://npm.io/package/caniuse-lite.md) ^1.0.30001178 - [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.8 - [@types/classnames](https://npm.io/package/@types/classnames.md) ^2.2.11 - [styled-components](https://npm.io/package/styled-components.md) ^5.2.1 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0 - [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.7 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10 ## Recent versions - 0.1.10 (latest) — 2021-02-05 - 0.1.7 (prerelease) — 2021-02-04 - 0.1.9 — 2021-02-05 - 0.1.8 — 2021-02-04 - 0.1.6 — 2021-02-04 - 0.1.5 — 2021-02-04 - 0.1.4 — 2021-02-04 - 0.1.3 — 2021-02-04 - 0.1.2 — 2021-02-04 - 0.1.1 — 2021-02-04 ## README # Documentation Welcome to My React Component ToolKit ! See documentation below for more informations. tips: This lib is under development. ## Installation ```sh $ npm i @falorun/personal-react-toolkit ``` You can now import in your component file : ```jsx import { Button } from "@falorun/personal-react-toolkit"; const MyComponent: React.FC = (props) => { return ; }; 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. --- _Source: https://npm.io/package/@falorun/personal-react-toolkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._