# UI Library

## Install

```
yarn install @plesk/ui-library
```

You don't need to add `react` and `react-dom` to your package.json dependencies.

## Usage

```jsx
import '@plesk/ui-library/dist/plesk-ui-library.css';
import { Button, render } from '@plesk/ui-library';
render(<Button>Ok</Button>, document.getElementById('root'));
```

Please note that Tree Shaking works out of box only with Webpack 4.

### Example of Webpack config for a project

```js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(svg|png|woff2|woff)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {},
                    },
                ],
            },
            {
                test: /\.css$/,
                use: [{ loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader' }],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: '[id].css',
        }),
    ],
};
```
