This is a collection of reusable react components.

Install the package npm install @dotkomonline/react-components.

Import a component directly

import { Button } from 'package/Buttons'

or import the whole package and use what you want

import { Button } from 'package'

As any React project, using these components requires transpiling them. Look up babel and webpack for a simple start: https://babeljs.io/docs/plugins/transform-react-jsx/

For some examples check out the ones in use for storybook:

• example babel config
• example webpack config

Sometimes node_modules will be ignored from webpack transpiling, and if that's the case this package has to be excepted from that exclude.

If using an exclude-clause, add this matching rule to exclude @dotkomonline/react-components from being excluded (double negatives are fun, right?)

exclude: /node_modules(?!\/@dotkomonline\/react-components)

Components use CSS modules for styling. This requires the webpack-config to use css-loader (for development use it's smart to use style-loader for hot-reloading).

Some components uses images. These images are imported by the javascript code using ES6 import statements and they can be used in an HTML element like so: <img src={imageSource} />. Depending on the transpiler, these resources can be imported inline as base64 strings or URIs.

Some suggestions for webpack loaders to use:

• url-loader for b64 strings
• file-loader for URIs

Read npm version and npm publish for how to release. Log in to dotkomuser.

We follow semantic versioning, so make sure you bump the correct version when bumping.