A set of independent components. Awesome library based on HTML and CSS using BEM convention with a JavaScript react.js implementation. Each components are autonomous and extensible. Pick and use only what you need!
How is done css isolation?
Only by using BEM (Block Element Modifier) css convention. No need of a intricate technologies, just pragatism.
Component are simple to use (just drag and drog it), simple to customise (by using css modifier) to your own need. Each Components may evoluate internally (html, css, js) minimizing the impact on your application.
You can easily build a new app from scratch or integrate component into existing application.
html+css documentation website react storybook website
Install what you need
npm install @axa-fr/react-toolkit-alert --saveUse only what you need
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="Les caves et les garages situés dans le même corps de bâtiment que le logement assuré sont garantis d′office"
/>
}@axa-fr/react-toolkit-form-input-text@axa-fr/react-toolkit-form-input-date@axa-fr/react-toolkit-form-input-choice@axa-fr/react-toolkit-form-input-select@axa-fr/react-toolkit-form-input-select-multi@axa-fr/react-toolkit-form-input-file@axa-fr/react-toolkit-form-input-slider@axa-fr/react-toolkit-form-input-checkbox@axa-fr/react-toolkit-form-input-textarea@axa-fr/react-toolkit-form-input-radio@axa-fr/react-toolkit-form-summary@axa-fr/react-toolkit-form-steps@axa-fr/react-toolkit-form-core@axa-fr/react-toolkit-form-input-number@axa-fr/react-toolkit-form-input-card@axa-fr/react-toolkit-form-input-select@axa-fr/react-toolkit-form-input-switch@axa-fr/react-toolkit-layout-footer@axa-fr/react-toolkit-layout-footer-client@axa-fr/react-toolkit-layout-header@axa-fr/react-toolkit-table@axa-fr/react-toolkit-collapse@axa-fr/react-toolkit-loader@axa-fr/react-toolkit-help@axa-fr/react-toolkit-popover@axa-fr/react-toolkit-modal@axa-fr/react-toolkit-modal@axa-fr/react-toolkit-action@axa-fr/react-toolkit-alert@axa-fr/react-toolkit-tabs@axa-fr/react-toolkit-badge@axa-fr/react-toolkit-button@axa-fr/react-toolkit-icon@axa-fr/react-toolkit-core
Each component should be autonomous (html + css + javascript) and extensible.
-
Html/Css :
- BEM convention is used in order to break css cascading problem
- Scss and css files are avalaible by component and can be overrided or extended
- Html/Css Documentation
-
React :
- Components are without state by default
- Some higher component level are statefull but feel free to use the stateless one if it not feet to your use case
- React documentation
- Update general documentation
- Continu to migrate to TypeScript component by component
- Continu to fix and clean code. Make it simpler, faster, lighter