Skip to content

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

License

Notifications You must be signed in to change notification settings

moxystudio/react-lib-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

4d8f679 · Apr 17, 2021

History

28 Commits
Apr 17, 2021
Mar 25, 2021
Mar 25, 2021
Apr 15, 2020
May 7, 2020
Apr 15, 2020
Apr 17, 2020
Apr 15, 2020
Apr 15, 2020
Apr 22, 2020
Apr 15, 2020
Apr 29, 2020
Aug 17, 2020
Aug 25, 2020
Mar 25, 2021
Mar 25, 2021
Apr 17, 2020

Repository files navigation


⚠️ 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}

NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

{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.

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published