🧩 React - Transfero Components

Prerequisites

This project requires NodeJS (version 8 or later) and NPM. Node and NPM are really easy to install. To make sure you have them available on your machine, try running the following command.

$ npm -v && node -v
6.4.1
v8.16.0

Required libs

All libraries are installed automatically. No commands are needed.

Material UI @emotion/react, @emotion/styled, @mui/material Homepage Luxon Homepage Icomoon react-icomoon Homepage Victory Homepage

Table of contents

• React - Transfero Components
  • Prerequisites
  • Table of contents
  • Getting Started
  • Installation
  • Usage
    • Example
    • Button
      • props
    • Charts
      • props
    • Icon
      • props
    • Input
      • props
    • InputSelect
      • props
    • Loader
      • props
    • ModalPopup
      • props
    • Template
      • props
    • TopBar
      • props
    • Typo
      • props
  • Authors

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Installation

BEFORE YOU INSTALL: please read the prerequisites

To install and set up the library, run:

$ npm install transfero-components --save

Or if you prefer using Yarn:

$ yarn add transfero-components

Usage

Example

import { Loader } from 'transfero-components';

const App = () => {
  return (
    <div>
      <Loader />
    </div>
  );
};

Button

import { Button } from 'transfero-components';

const App = () => {
  return (
    <div>
      <Button onClick={() => alert("I'm a button")}>Click me</Button>
    </div>
  );
};

Button Props

| Name | Type | Default | Description | | --------- | ----------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | onClick* | function | | Action when user click. | | children | node | | The content of the component. | | size | sm | md | lg | md | The size of the component. | | icon | IconTypes | | Insert an icon on button. Check available icons. | | iconsize | sm | md | lg | 16 | The icon size of the component. Only available with icon property. | | outline | bool | false | If true, the component is styled outline. | | disabled | bool | false | If true, the component is disabled. | | theme | dark | light | light | The theme of the component. Use dark for dark screens ans light for light screens | | link | bool | false | If true, the component is formatted as link. | | circle | bool | false | If true, the component is formatted as a circle. Only available with icon property without children property. | | style | CSSProperties | | The system prop that allows defining system overrides as well as additional CSS styles. See the sx page for more details. | | iconColor | string | | The color of the icon. Only available with icon property. | | textColor | string | | Override the text color of the component. | | className | string | | Override or extend the styles applied to the component. |

* Required

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Add your changes: git add .
4. Commit your changes: git commit -am 'Add some feature'
5. Push to the branch: git push origin my-new-feature
6. Submit a pull request :sunglasses:

Authors

• Guilherme Miranda - Initial work - MadeByGui