UI TOOLKIT PLAYGROUND

react-ui-toolkit

Rappresenta il progetto principale che contiene la libreria React di componenti, stili e utility.

E' composto da due parti:

• progetto principale: contiene i componenti e i files di configurazione e automation. Gli script in package.json saranno utilizzati solo per le build.

• progetto examples/simple: un progetto playground indipendente tramite il quale sarà possibile sviluppare e provare i componenti.

La documentazione per utilizzarli è contenuta nel file README.md.

Development

Go to react-ui-toolkit/examples/simple:

• install dependencies:

npm install

• run the project:

npm start

Build

npm run build
npm run build:umd

Publish on npm

npm run prepublish
npm publish

How to use

Add the dependencies to package.json

"dependencies": {
  "react": "x.x.x",
  "react-dom": "x.x.x",
  "react-ui-toolkit": "x.x.x" <---
}

Use in your project:

// Import css
import '../node_modules/react-ui-toolkit/dist/react-ui-toolkit.css';
// import components
import { Hello } from 'react-ui-toolkit';

JSX:

<Hello />,

Create a new component

• Develop the new component (i.e. MyCompo.js)

• export the component in index.js as following:

import MyCompo from './components/navigation/TabBar';

export {
  ..., Grid, MyCompo, TabBar, ...
};

• Develop and play with the component in the playground examples/simple:

import { MyCompo } from 'react-ui-toolkit';

JSX:

<MyCompo />

Trick: how to use in local

You don't want to publish when you update the library with new features ?

1. update the library version in package.json

2. go to your project root folder and install react-ui-toolkit from your local machine, as following:

npm install [PATH]
npm install ../react-ui-toolkit/
npm install users/[..]/react-ui-toolkit/

3. the project will be compiled and the new version will be imported in your project.