@amityco/diana-ds
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Amity Diana Design System for web

What is it?

This package contains a set of "ready to use" React components for our web products.

How to install it?

  • From npm: npm install @amityco/diana-ds
  • From yarn: yarn add @amityco/diana-ds

How to use it?

Diana Provider

import 'antd/dist/antd.css'; // dont forget this part!

import React from 'react';
import ReactDOM from 'react-dom';

import { DianaProvider } from '@amityco/diana-ds';

import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <DianaProvider>
      <App />
    </DianaProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Customisation

Theming

The theme interface is available when importing import { Theme } from '@amityco/diana-ds'. You can pass any partial theme object matching this interface to the Ui-Kit provider to customise the look and feel of our components:

const theme = {
  palette: {
    primary: "#ff0000",
  },
}

// ...

<DianaProvider theme={theme}>{...}</DianaProvider>

Internationalisation

We support english out of the box, but you can also add your own language (as for now we only support LTR languages).

const languages = {
  th: {
    i18nkey: 'hello world',
  },
}

// ...

<DianaProvider languages={languages} locale="th">{...}</DianaProvider>

Readme

Keywords

none

Package Sidebar

Install

npm i @amityco/diana-ds

Weekly Downloads

0

Version

1.0.1

License

MIT

Unpacked Size

115 kB

Total Files

36

Last publish

Collaborators

  • pakkawat
  • touchaponk
  • ekoapp