Skip to content
This repository has been archived by the owner on Oct 19, 2023. It is now read-only.
/ aha-react Public archive

Aha Design System - React - Collection of React Components for building web applications.

License

Notifications You must be signed in to change notification settings

gotitinc/aha-react

Repository files navigation

Aha logo

Aha Design System - React

Collection of React Components for building web applications.
Explore Aha docs »

Report bug · Request feature

Status

CI npm bundle size npm version dependencies Status peerDependencies Status devDependency Status

Quick start

Installation

You have to install both @ahaui/react and @ahaui/css

# With npm
npm install @ahaui/react @ahaui/css

# Or with yarn
yarn add @ahaui/react @ahaui/css

Usage

import '@ahaui/css/dist/index.min.css';
import React from 'react';
import { Button } from '@ahaui/react';

function Example() {
  const onButtonClick = () => {
    alert('Aha!');
  };

  return (
    <Button
      onClick={onButtonClick}
    >
      Click me!
    </Button>
  );
}

Aha! Just simple as that!

Customization

Plugins

You can customize specific Aha React Components via plugins!

For now, to provide your custom assets to Logo, Avatar, EmptyState, you can use AssetPlugin.

import { AssetPlugin, Plugins, Logo } from '@ahaui/react';

const LogoAssetsPlugin = new AssetPlugin({
  prefix: 'logo',
  assets: {
    mylogo: require('./assets/images/logo/my-logo.svg').default,
    foobar: 'https://foo.bar/image.jpg',
  }
});

Plugins.loadPlugin(LogoAssetsPlugin);

function Example() {
  return (
    <Logo name="mylogo" />
  );
}

Various types of plugin will be developed in the future, stay tune!

Plugins could also be published standalone as a npm package (follow the template here).

Custom CSS

Further instruction could be found in here.

Copyright and License

Code and documentation copyright 2020 the Got It, Inc. Code released under the Apache-2.0 License.