React components for Caligram.
Demo and documentation
The Storybook shows every component in action, along with documentation.
npm install --save caligram-react
To customize icons or text strings, pass a configuration object to caligram-react using the
icons configuration object expects React components. You can use a webpack loader to convert SVGs to React components, like
linkComponent expects a React component with
onClick props. The
to prop expects an object with
pathname keys. This matches the
react-router 2.0 Link component and might change in the future.
After you clone the repository, you can begin developement and see your changes immediately using Storybook:
npm run storybook
If you want to use your developement copy of
caligram-react in your project, we recommend using
wml as Webpack doesn’t play nice with
npm link. To use
wml you’ll first need to install Watchman. Then install
npm install -g wml
Then add the link to your project’s
node_modules (you only need to do this once):
wml add ~/path/to/caligram-react ~/path/to/your-project/node_modules/caligram-react
Then run the
prepare script to transpile to ES5, and start
wml to sync the
npm run prepare wml start
wml will ask you if you want to ignore the
node_modules directories. Answer Yes for both.
wml start will watch your
dist directory and automatically sync changes; you can leave it running and run
npm run prepare whenever you’ve made changes.
Run tests with the following commands:
npm run testonly– run tests once
npm run test-watch– run tests and watch for changes
npm test– run tests and apply lint rules
Updating the npm package
npm run prepare npm version (major|minor|patch) npm publish git push origin --tags
This changes the version number in
package.json, creates a new tag, and pushes to npm.
See full documentation on npm.
caligram-react is based on React Component Development Kit.