The home of all of Wonderbly's reusable React Components

Downloads in past


11.16.3a month ago7 years agoMinified + gzip package size for wonderbly-components in KB


Wonderbly Components
This package is a unit tested bundle of reusable components built in React. Wonderbly website-v2 consumes these components via npm for example:
import Tag from "wonderbly-components/lib/Tag";

<Tag backgroundColor="#7077CC">I'm a tag</Tag>;

The site repo also displays component examples via react-styleguidist.


  • node
  • yarn
  • heroku cli & account (if deploying from repo)
  • npm account (if publishing to npm)


yarn install
  • You will need to npm login and have access from wonderbly
  • You will need to heroku login and have access from wonderbly


yarn start
# fire up styleguide locally

yarn test
# run mocha + enzyme unit tests

yarn test:watch
# rerun tests on file changes

yarn styleguide:copy-assets
# styleguidist requires fonts as static assets from wonderbly-css
# styleguide/assets/** is ignored so these must be copied once per clean install

yarn styleguide:build
# build styleguide locally to ./styleguide-build/

yarn build
# removes ./lib folder and rebuilds production files

yarn watch
# reruns build on file changes
# should be used for local yarn linked development

yarn lint
# lint ./src/

yarn lint:fix
# fix your bad typing

npm publish
# builds and publishes the package

Publishing a new version

  • Ensure the changes made on the branch you're working on
have been approved and merged into master.
  • Checkout to the master branch.
  • Make sure you have pulled the lastest changes so master is up to date locally
  • To bump the version: npm version [<newversion> | major | minor | patch
  • Publish package: npm publish
  • Push the versioning commit made by npm publish to master
  • Update the package.json of website-v2


Use the #deployment channel to deploy master on slack:
/h deploy wonderbly-components to production
You can also deploy a branch like this:
/h deploy wonderbly-components/chore/gw_deploy-styleguide to production

Linking repositories

If you're working on the website and want to see changes from wonderbly-components on local website.
# in wonderbly-components register packages with yarn
yarn link
# react must be linked due to react hooks
cd node_modules/react
yarn link

# in website-v2
yarn link wonderbly-components
yarn link react

# in wonderbly-components rebuild on file change
yarn watch