ReactUI Integrations


This is a collection of tools for various libraries to integrate About Bit's ReactUI into a project.

Table of content

- Usage
- Supported libraries
- Next.js
- Webpack
- Configuration
- Build & Publish
- Information
- Support
- Credits
- License

Usage

1. Install the package

``bash
npm install -D @aboutbits/react-ui-integrations
`

2. Add a reactui.config.js to your project's directory

See Configuration for available options.

`js
module.exports = {
theme: {
override: [...],
merge: [...]
}
}
`

3. Pass the REACTUI_THEME to your ReactUIProvider instance:

`jsx
import { ReactUIProvider, Theme } from '@aboutbits/react-ui'
import React from 'react'

declare const REACTUI_THEME: Theme

export const Layout: React.FC = ({ children }) => {
return {children}
}
`

4. Configure the Tailwind CSS plugin

tailwind.config.js:

`js
module.exports = {
plugins: [
// Basic configuration
require('@aboutbits/react-ui-integrations').useTailwindPlugin(),

// Configuration with custom config file
require('@aboutbits/react-ui-integrations').useTailwindPlugin({
configFile: resolve('./reactui_custom.config.js'),
}),
],
}
`

Optional configuration options

- configFile: Absolute path to an alternative configuration file

5. Configure the respective library in your project

See Supported libraries.

Supported libraries

$3

next.config.js:

`js
const { withReactUI } = require('@aboutbits/react-ui-integrations')

let nextConfig = {} // your NextJS config

// Basic configuration
nextConfig = withReactUI(nextConfig)

// Configuration with custom theme variable and config file
nextConfig = withReactUI(nextConfig, {
themeVariable: 'REACTUI_THEME_CUSTOM',
configFile: path.resolve('./reactui_custom.config.js'),
})

module.exports = nextConfig
`

Optional configuration options

- themeVariable: Configure the variable name to which the ReactUI theme will be bound (by Webpack's DefinePlugin).
- configFile: Absolute path to an alternative configuration file

$3

webpack.config.js:

`js
const { ReactUIWebpackPlugin } = require('@aboutbits/react-ui-integrations')

module.exports = {
plugins: [
// Basic configuration
new ReactUIWebpackPlugin(),

// Configuration with custom theme variable and config file
new ReactUIWebpackPlugin({
themeVariable: 'REACTUI_THEME_CUSTOM',
configFile: path.resolve('./reactui_custom.config.js'),
}),
],
}
`

Optional configuration options

- themeVariable: Configure the variable name to which the ReactUI theme will be bound (by Webpack's DefinePlugin).
- configFile: Absolute path to an alternative configuration file

$3

webpack.config.js:

`js
const { getTheme } = require('@aboutbits/react-ui-integrations')

module.exports = {
globals: {
REACTUI_THEME: getTheme(),
},
}
`

Optional configuration options

- configFile: Absolute path to an alternative configuration file

Configuration

These configuration options are available to be set in the reactui.config.js:

- theme.override / theme.merge

Extend ReactUI theme configuration. Starting with version 1.0 you have the option to override or merge the ReacUI's default theme configuration.

Build & Publish

To publish the package commit all changes and push them to main. Then run one of the following commands locally:

`bash
npm version patch
npm version minor
npm version major
``

Information

About Bits is a company based in South Tyrol, Italy. You can find more information about us
on our website.

$3

For support, please contact info@aboutbits.it.

$3

- All Contributors

$3

The MIT License (MIT). Please see the license file for more information.