@veracity/ui-react v0.2.66396

VERACITY Common Components Library (CCL)

A component library for building applications on the Veracity Platform.

Please read the Contribute page for information about reporting bugs and issues.

Installation

Install using node or yarn

npm i @veracity/ui-react
yarn add @veracity/ui-react

If you are using TypeScript in your client project you need to add

	"allowSyntheticDefaultImports": true

to your tsconfig.json file. We are currently only exporting es5 versions of this package for broader compatibility.

Requirements

• Webpack, TypeScript or similar bundler
• SASS

This library requires webpack or an equivalent bundler that understands JS and SCSS import statements. Styling of compoents is done through SCSS internally and your webpack config must therefore support bundling of such files.

Webpack support for SCSS

To support SCSS files in your webpack bundle you must install node-sass and sass-loader then add a rule for them within your webpack config.

npm i -D node-sass sass-loader css-loader

// In your webpack config add a rule for SCSS files that includes the node_modules folder.
{
	test: /\.scss$/,
	use: [
		{
			loader: 'sass-loader'
		}
	]
}

// Optionally if you want to use CSS modules locally you need to have a separate rule for this libraries scss files
// as they will not work correctly if they are modularized.
{ // CSS modules for local SCSS files
	test: /\.scss$/,
	exclude: /(node_modules|\.global\.scss)/,
	use: [
		{
			loader: 'css-loader',
			options: {
				modules: true,
				importLoaders: 1
			}
		},
		{
			loader: 'sass-loader'
		}
	]
},
{ // No CSS modules for files loader from node_modules
	test: /\/node_modules\/.+?\.scss$/,
	use: [
		{
			loader: 'sass-loader'
		}
	]
}

Usage

Simply import the component you require and use it as any other component.

import React from 'react';
import Button from '@veracity/ui-react/Button'; // Always use direct imports to minimize the final package size

export class MyComponent extends React.PureComponent{
	render(){
		return (
			<div>Hello world <Button>Click me</Button></div>
		)
	}
};

export default MyComponent;

Documentation and demo

The documentation and component demos have been combined into a single demo page. The demo is available here.