@aboutbits/react-ui-integrations
v1.2.0
Published
Webpack and Tailwind integration for ReactUI
Downloads
120
Readme
ReactUI Integrations
This is a collection of tools for various libraries to integrate About Bit's ReactUI into a project.
Table of content
Usage
Install the package
npm install -D @aboutbits/react-ui-integrations
Add a
reactui.config.js
to your project's directorySee Configuration for available options.
module.exports = { theme: { override: [...], merge: [...] } }
Pass the
REACTUI_THEME
to yourReactUIProvider
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 [email protected].
Credits
License
The MIT License (MIT). Please see the license file for more information.