Skip to content

aboutbits/react-ui-integrations

Repository files navigation

ReactUI Integrations

npm package license

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

Table of content

Usage

  1. Install the package

    npm install -D @aboutbits/react-ui-integrations
  2. Add a reactui.config.js to your project's directory

    See Configuration for available options.

    module.exports = {
      theme: {
        override: [...],
        merge: [...]
      }
    }
  3. 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>
    }
  4. 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
  5. 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 info@aboutbits.it.

Credits

License

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