node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

@dollarshaveclub/react-components

DSC React Components

CircleCI codecov

See storybook of all components here: https://dollarshaveclub.github.io/dsc-react-components/

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.

Commands

  • 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

Components

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

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

AppHeaderCrown

Requires the following props:

  • countries

Usage:

// 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-assets/us.json'
<AppHeaderCrown {...faceAssetsFixturesUS} />
 
// or load from window object
<AppHeaderCrown {...window.FaceAssetsFixtures} />

Footer

Reusable Footer component.

Requires the following props:

  • links
  • countries

Usage:

// 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} />