Transfero-components NPM

🧩 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

React - Transfero Components

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.