https://github.com/karmaniverous/react-component-npm-package-template
An ES6 React component NPM package project template featuring front & back end test support, automated API docs, release management & more!
https://github.com/karmaniverous/react-component-npm-package-template
chai mocha npm package react release template testing
Last synced: 7 months ago
JSON representation
An ES6 React component NPM package project template featuring front & back end test support, automated API docs, release management & more!
- Host: GitHub
- URL: https://github.com/karmaniverous/react-component-npm-package-template
- Owner: karmaniverous
- Created: 2022-07-12T07:51:59.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T05:58:40.000Z (over 1 year ago)
- Last Synced: 2024-08-12T07:03:23.134Z (over 1 year ago)
- Topics: chai, mocha, npm, package, react, release, template, testing
- Language: JavaScript
- Homepage: https://karmanivero.us/blog/react-component-npm-package-template/
- Size: 1.94 MB
- Stars: 2
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# React Component NPM Package Template
You wrote a sweet React component! Releasing it on [NPM](https://www.npmjs.com/)
seems like the obvious next step. Right?
Try it. Not as easy to do from scratch as you might think.
So here's a plug-and-play NPM package template that offers the following
features:
- Support for the latest ES6 + JSX goodies with
[`eslint`](https://www.npmjs.com/package/eslint) _uber alles_.
- Automated [`lodash`](https://www.npmjs.com/package/lodash) cherry-picking with
[`babel-plugin-lodash`](https://www.npmjs.com/package/babel-plugin-lodash).
- Front & back-end testing with [`mocha`](https://www.npmjs.com/package/mocha),
[`chai`](https://www.npmjs.com/package/chai), and the
[React Testing Library](https://www.npmjs.com/package/@testing-library/react).
Includes examples and a sweet testing console!
- Code formatting at every save & paste with
[`prettier`](https://www.npmjs.com/package/prettier).
- Automated documentation of your API with
[`jsdoc-to-markdown`](https://www.npmjs.com/package/jsdoc-to-markdown) and
assembly of your README with
[`concat-md`](https://www.npmjs.com/package/concat-md).
- One-button release to GitHub & publish to NPM with
[`release-it`](https://www.npmjs.com/package/release-it).
**[Click here](https://karmanivero.us/blog/react-component-npm-package-template/)
for full template documentation & instructions!**
_If you want to create a non-React NPM package, try my regular
[NPM Package Template](https://github.com/karmaniverous/npm-package-template)
instead!_
# API Documentation
```js
import { MyComponent } from '@karmaniverous/react-component-npm-package-template`;
```
## MyComponent()
Wraps children in an `h1` tag with a specified `data-test-id` attribute.
Using lodash purely to demonstrate Babel cherry-picking.
**Kind**: global function
**Component**:
**Example**
```js
Hello, world!;
//
Hello, world!
```
---
See more great templates and other tools on
[my GitHub Profile](https://github.com/karmaniverous)!