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:
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.