node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


DSC React Components

CircleCI codecov

Roadmap and Component Requests

Please take a look at the Roadmap Project to requests new components, or check on the development status of a particular component.

For component requests, please include as much detail as you can, but keep in mind that these components are meant to be easily reusable, as well as localized out of the box.


  • npm run eslint - run eslint
  • npm run storybook - start the story book
  • npm run build-storybook - build the story book to /docs, which updates the github page
  • npm run test-isomorphic - run isomorphic tests, which are run in just a node environment. These are tests in __tests__/*.js.
  • npm run test-jsdom - run tests in a jsdom environment. These are tests in __tests__/jsdom/*.js.
  • npm run test - runs all tests


Check the table below for component production status in specifc shops.

Component US AU CA UK
AppHeaderCrown ✔️ ✔️ ✔️ ✔️
Footer ✔️


Requires the following props:

  • countries


// import from package
import AppHeaderCrown from '@dollarshaveclub/react-components/dist/AppHeaderCrown'
// pass props
<AppHeaderCrown countries={countries} />
// or load props from a file
import faceAssetsFixturesUS from '../fixtures/face-middleware/us.json'
<AppHeaderCrown {...faceAssetsFixturesUS} />
// or load from window object
<AppHeaderCrown {...window.FaceAssetsFixtures} />


Reusable Footer component.

Requires the following props:

  • links
  • countries


// import from package
import Footer from '@dollarshaveclub/react-components/dist/Footer'
// pass props
<Footer links={links} countries={countries} />
// or load props from a file
import faceAssetsFixturesUS from '../fixtures/face-assets/us.json'
<Footer {...faceAssetsFixturesUS} />
// or load from window object
<Footer {...window.FaceAssetsFixtures} />