Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@aboutbits/react-ui-integrations

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aboutbits/react-ui-integrations

Webpack and Tailwind integration for ReactUI

  • 1.2.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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.

Keywords

FAQs

Package last updated on 27 Mar 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc