React AXA UI

React AXA UI is a set of React components that implements AXA Web Toolkit for building responsive AXA web apps. It is built on top of CSS Modules written in SASS, webpack and TypeScript. React AXA UI is open source, free to use and customizable so feel free to join and enrich the project with your ideas.

Installation

React AXA UI can be installed as an npm package:

$ npm install --save react-axa-ui

Add web-toolkit as an npm dependency:

$ npm install @axa/web-toolkit

After that, include the styles from the dist folder into your less file:

@import 'scss/style';

Or just consume the precompiled css files, also from the dist folder:

<link rel="stylesheet" href="dist/bundles/all.css">

If you don't want to reimplement the interactivity of our components, just use our jQuery plugins:

<script src="dist/bundles/all.js"></script>

If you don't want to use npm to include the Web Toolkit, you might download the latests release package from our GitHub releases page.

Basic usage

In this minimal example, we import a Button:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-axa-ui/Button';

ReactDOM.render(
  <Button text="Hello World!" />,
  document.getElementById('app')
);

Build it yourself!

After you've successfully cloned the project and stepped into it, download the dependencies.

$ npm install -g typescript webpack
$ npm install
$ webpack

Now open up index.html in your favorite browser and everything should be ready to use!