@aboutbits/react-ui-integrations

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

• Install the package

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

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

  See Configuration for available options.

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

• Pass the REACTUI_THEME to your ReactUIProvider instance:

  import { ReactUIProvider, Theme } from '@aboutbits/react-ui'
  import React from 'react'
  
  declare const REACTUI_THEME: Theme
  
  export const Layout: React.FC = ({ children }) => {
    return <ReactUIProvider theme={REACTUI_THEME}>{children}</ReactUIProvider>
  }
  

• Configure the Tailwind CSS plugin

  tailwind.config.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

• Configure the respective library in your project

  See Supported libraries.

Supported libraries

Next.js

next.config.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

Webpack

webpack.config.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

Jest

webpack.config.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:

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.

Support

For support, please contact [e-mail].

Credits

• All Contributors

License

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