isabella232 / react-lib-template

This template aims to make the implementation of react component packages easier and more methodic.

---

⚠️ PLEASE READ THE INSTRUCTIONS FOR GUIDELINES ON HOW TO START YOUR PACKAGE.

Don't forget to remove this warning while updating this README.

---

{package-name}

{package-description}

Installation

$ npm install @moxy/{package-name}

This library is written in modern JavaScript and is published in both CommonJS and ES module transpiled variants. If you target older browsers please make sure to transpile accordingly.

Motivation

{package-motivation}

Usage

{package-usage-example}

API

{package-api-description}

{package-api-prop-example}

Type: object Required: true

The {package-api-prop-example} has the following shape:

{package-api-prop-example}: PropTypes.shape({
    foo: PropTypes.string,
    bar: PropTypes.arrayOf(PropTypes.object),
}).isRequired,

Tests

$ npm test
$ npm test -- --watch # during development

Demo

A demo Next.js project is available in the /demo folder so you can try out this component.

First, build the {package-name} project with:

$ npm run build

Note: Everytime a change is made to the package a rebuild is required to reflect those changes on the demo. While developing, it may be a good idea to run the dev script, so you won't need to manually run the build after every change

$ npm run dev

To run the demo, do the following inside the demo's folder:

$ npm i
$ npm run dev

FAQ

I can't override the component's CSS, what's happening?

There is an ongoing next.js issue about the loading order of modules and global CSS in development mode. This has been fixed in v9.3.6-canary.0, so you can either update next.js to a version higher than v9.3.5, or simply increase the CSS specificity when overriding component's classes, as we did in the demo, e.g. having the page or section CSS wrap the component's one.

License

Released under the MIT License.