Skip to content

Using the package

Jump to bottom
Jake Polatty edited this page Aug 13, 2018 · 3 revisions

Importing Latest Version from Github

The component library can be imported as an npm package to make all of the components available in ES6 import statements in other projects.

  1. Add the following line to your project package.json dependencies (you can also use the github ssh url if you authenticate using ssh).
"react-component-lib": "git+https://github.com/asascience/react-component-lib.git",
  1. Run the following command to install the compiled package (along with any other node dependencies defined in package.json):
npm install
  1. Import the needed components with the following ES6 syntax:
import {LeafletMap, WMSStylesSelectorDrawer} from 'react-component-lib';

Testing Live Edits in Development Mode

Note that this method is unstable and can lead to npm dependency errors--perform at your own risk

If you are currently working on a new component in the component library and want to test its implementation in another project without using Storybook, you can do so with the following live development workflow:

  1. Make a fork of the component library and clone the repo locally to make changes:
git clone https://github.com/USERNAME/react-component-lib.git
  1. Build the component library with a watcher for changes with the following command:
npm run develop

This will detect any changes you make to files in the component library and will rebuild just the updated files.

  1. Go to the project directory where you will be testing the implementation of your component, and install your local copy of the component library (uninstalling first to ensure a clean install):
npm uninstall react-component-library
npm install --save ../<PathToReactComponentLib>

As usual, you can import your new components with import {Component} from 'react-component-library'. Any changes to your code in react-component-library will cause a reload of the page if you run your project in development mode with npm start.

Clone this wiki locally