├── helpers └── load-package.cjs ├── .gitignore ├── .storybook ├── main.js └── Component.stories.jsx ├── .npmignore ├── src └── index.jsx ├── rollup.config.js ├── LICENSE ├── README.md └── package.json /helpers/load-package.cjs: -------------------------------------------------------------------------------- 1 | module.exports = require('../package.json'); 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | node_modules 3 | dist 4 | 5 | # Output of 'npm pack' 6 | *.tgz -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | export default { 2 | stories: ['./*.stories.jsx'], 3 | framework: { name: '@storybook/react-vite' }, 4 | }; 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Folders 2 | node_modules 3 | .storybook 4 | src 5 | 6 | # Output of 'npm pack' 7 | *.tgz 8 | 9 | # Files 10 | .gitignore 11 | rollup.config.js -------------------------------------------------------------------------------- /.storybook/Component.stories.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CounterComponent } from '../src/index.jsx'; 3 | 4 | export default { 5 | component: CounterComponent, 6 | title: 'Counter' 7 | }; 8 | 9 | export const Placeholder = () => ; 10 | -------------------------------------------------------------------------------- /src/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | 3 | const CounterComponent = () => { 4 | const [count, setCount] = useState(0); 5 | 6 | return ( 7 |
8 |

Currently, the count is {count}

9 | 10 | 11 |
12 | ); 13 | } 14 | 15 | export { CounterComponent }; -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from '@rollup/plugin-babel'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import terser from '@rollup/plugin-terser'; 5 | import pkg from './package.json' assert { type: 'json' }; 6 | 7 | export default { 8 | input: 'src/index.jsx', 9 | output: [ 10 | { file: pkg.main, format: 'cjs' }, 11 | { file: pkg.module, format: 'esm' }, 12 | ], 13 | plugins: [ 14 | babel({ 15 | babelHelpers: 'bundled', 16 | exclude: 'node_modules/**', 17 | presets: ['@babel/preset-env','@babel/preset-react'] 18 | }), 19 | resolve(), 20 | commonjs(), 21 | terser(), 22 | ], 23 | external: Object.keys(pkg.peerDependencies), 24 | }; 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Juan Pablo Mejia Duque 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Package Boilerplate 2 | Boilerplate code for a simple, lightweight, and performant react npm package. Read a step-by-step guide on how to create a react npm package on [Codify Tools](https://www.codifytools.com/blog/react-npm-package). 3 | 4 | ![npm bundle size](https://img.shields.io/bundlephobia/min/@codifytools/react-npm-package-boilerplate?style=flat-square) 5 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/@codifytools/react-npm-package-boilerplate?style=flat-square) 6 | ![npm downloads](https://img.shields.io/npm/dt/@codifytools/react-npm-package-boilerplate?style=flat-square) 7 | ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square) 8 | 9 | ## Features 10 | - [Babel](https://babeljs.io/) for modern JavaScript and JSX transpilation. 11 | - [Rollup](https://rollupjs.org/) for build. 12 | - Bundle generated in `cjs` and `esm` formats. 13 | - [Storybook](https://storybook.js.org/) for local development. 14 | 15 | ### Commands 16 | - `npm install` - install project dependencies. 17 | - `npm run storybook` - start local development environment. 18 | - `npm run build` - build package into `dist/` folder. 19 | - `npm publish` - publish your package to [npm](npmjs.com). 20 | 21 | ### License 22 | MIT license, Copyright (c) Juan Pablo Mejia Duque. For more information see `LICENSE`. 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@codifytools/react-npm-package-boilerplate", 3 | "version": "1.0.14", 4 | "description": "", 5 | "type": "module", 6 | "main": "dist/index.cjs.js", 7 | "module": "dist/index.esm.js", 8 | "scripts": { 9 | "storybook": "storybook dev", 10 | "build": "rollup -c", 11 | "npm:details": "npm pack --dry-run", 12 | "npm:publish": "npm run build && npm publish --access public" 13 | }, 14 | "keywords": [ 15 | "react", 16 | "storybook", 17 | "rollup", 18 | "boilerplate" 19 | ], 20 | "author": "Juan Pablo Mejia Duque", 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/codifytools/react-npm-package-boilerplate.git" 24 | }, 25 | "license": "MIT", 26 | "engines": { 27 | "node": "20" 28 | }, 29 | "peerDependencies": { 30 | "react": ">=16.8.0", 31 | "react-dom": ">=16.8.0" 32 | }, 33 | "devDependencies": { 34 | "@babel/core": "^7.23.7", 35 | "@babel/preset-env": "^7.23.7", 36 | "@babel/preset-react": "^7.23.3", 37 | "@rollup/plugin-babel": "^6.0.4", 38 | "@rollup/plugin-commonjs": "^25.0.7", 39 | "@rollup/plugin-node-resolve": "^15.2.3", 40 | "@rollup/plugin-terser": "^0.4.4", 41 | "@storybook/react-vite": "^7.6.6", 42 | "react": "^18.2.0", 43 | "react-dom": "^18.2.0", 44 | "rollup": "^4.9.2", 45 | "storybook": "^7.6.6" 46 | } 47 | } 48 | --------------------------------------------------------------------------------