@lifesum/cms-components NPM

Component Library

📗 Preview the components at https://lifesum.github.io/cms-components

Consuming the component library

Add the package to your project:

yarn add @lifesum/cms-components

Include the CSS bundle:

// In `index.js` or similar
import "@lifesum/cms-components/dist/main.build.css"

Wrap your app with the CMS Provider:

// In App.js or similar
import { Provider as CmsProvider } from "@lifesum/cms-components"

export default function() {
  return <CmsProvider>{/* The rest of your application here */}</CmsProvider>
}

Developing

Linking

When developing, you might want to use your local copy of the Component Library in a local copy of a consuming project. To do this, use npm link. (Yarn has similar functionality using yarn link, but it has some quirks so npm works better in this case)

In the root folder of your local copy of @lifesum/cms-components:

npm link

In the root folder of your consuming project:

npm link @lifesum/component-library

This setup will cause the consuming project to load two differenct instances of React and ReactDOM, which will cause issues with hooks and other functionality. To mitigate this, use npm link to use the consuming project's React package in the component library.

In the root folder of your local copy of @lifesum/cms-components:

npm link <PATH_TO_YOUR_CONSUMING_PROJECT>/node_modules/react
npm link <PATH_TO_YOUR_CONSUMING_PROJECT>/node_modules/react-dom

You should now be setup to be able to consume components from your local copy of the component library. However, you need to run a build after each change as the package only exposes the built files:

In the root folder of your local copy of @lifesum/cms-components: