@axa-fr/react-toolkit

About
Getting Started
Packages
Concept
How Does It Work
List of supported browsers
Contribute
Roadmap

About

A set of independent components. Awesome library based on HTML and CSS using BEM convention with the JavaScript ReactJS implementation. Each component is autonomous and extensible. Pick and use only what you need!

How React-toolkit does CSS isolation?

Only by using BEM (Block Element Modifier) CSS convention. No need for intricate technologies, just pragmatism.

Components are simple to use (just drag and drop it), simple to customize (by using CSS modifier) to your own need. Each component may evaluate internally (HTML, CSS, JS) and minimize any impact on your application.

You can easily build a new app from scratch or integrate some components into an existing application.

html+css documentation website react storybook website

Getting Started

You can either install everything and use only what you need. If you do that you will be able to use tree shaking to have a smaller bundle. However, you will need to import all the styles and not only the style related to your component.

npm install @axa-fr/react-toolkit-all --save

import React from 'react';

// Load only the component alert (smaller bundle size)
import { Alert } from '@axa-fr/react-toolkit-all/component/alert';

// Load all the toolkit (bigger bundle size)
import { Alert } from '@axa-fr/react-toolkit-all';

import '@axa-fr/react-toolkit-all/dist/style/af-toolkit-core.scss';

const MyAlertComponent = () => <Alert icon="ok" title="This is an alert" />;

Or you can install only the components you need:

npm install @axa-fr/react-toolkit-alert --save

import React from 'react';
import Alert from '@axa-fr/react-toolkit-alert';
import '@axa-fr/react-toolkit-alert/dist/alert.scss';

const MyAlertComponent = () => <Alert icon="ok" title="This is an alert" />;

Packages

Concept

Each component should be autonomous (HTML + CSS + JS) and extensible.

How Does It Work

HTML/CSS :
- BEM convention is used in order to break CSS cascading problem
- SCSS and CSS files are avalaible for every component and can be overrided or extended
- HTML/CSS Documentation
React :
- Components are stateless by default
- Some Higher-Order Components (HOC) are stateful but feel free to use the stateless one if it fits your use case
- React documentation

List of supported browsers

Here is the list of browsers we tested this toolkit on:

Chrome 84+
Firefox 79+
Microsoft Edge 85+
Internet Explorer 11
Safari 13.1+
Opera 71+

Contribute

Roadmap

Update general documentation
Migrating to TypeScript all components
Fix the issues and clean code. Make it simpler, faster, lighter

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

AxaGuilDEv / react-toolkit

Programming Languages

Labels

Projects that are alternatives of or similar to react-toolkit