├── .babelrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── demo ├── .babelrc ├── package-lock.json ├── package.json ├── src │ ├── index.html │ └── index.js └── webpack.config.js ├── package-lock.json ├── package.json ├── src └── BoilerplateComponent.jsx └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "env", 5 | "stage-0" 6 | ] 7 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Component lib directory 2 | lib 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (http://nodejs.org/api/addons.html) 30 | build/Release 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | typings 36 | 37 | # Optional npm cache directory 38 | .npm 39 | 40 | # Optional REPL history 41 | .node_repl_history -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | demo 3 | .babelrc 4 | webpack.config.js -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Jason Watmore 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. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # jw-react-npm-boilerplate 2 | 3 | React Boilerplate Component for npm 4 | 5 | Documentation and instructions on how to publish a React component to npm available at http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm -------------------------------------------------------------------------------- /demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "react", 4 | "env", 5 | "stage-0" 6 | ] 7 | } -------------------------------------------------------------------------------- /demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jw-react-npm-boilerplate-demo", 3 | "version": "1.0.0", 4 | "description": "React Boilerplate Component Demo", 5 | "license": "MIT", 6 | "scripts": { 7 | "build": "webpack", 8 | "start": "webpack-dev-server --open" 9 | }, 10 | "dependencies": { 11 | "jw-react-npm-boilerplate": "^1.0.0", 12 | "prop-types": "^15.6.0", 13 | "react": "^16.0.0", 14 | "react-dom": "^16.0.0" 15 | }, 16 | "devDependencies": { 17 | "babel-core": "^6.21.0", 18 | "babel-loader": "^7.1.4", 19 | "babel-preset-env": "^1.6.1", 20 | "babel-preset-react": "^6.16.0", 21 | "babel-preset-stage-0": "^6.24.1", 22 | "html-webpack-plugin": "^3.2.0", 23 | "path": "^0.12.7", 24 | "webpack": "^4.5.0", 25 | "webpack-cli": "^3.2.1", 26 | "webpack-dev-server": "^3.1.3" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /demo/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Boilerplate Component Demo 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /demo/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | 4 | import BoilerplateComponent from 'jw-react-npm-boilerplate'; 5 | 6 | render( 7 |
8 |

React Boilerplate Component Demo

9 | console.log(val)} /> 10 |
, 11 | document.getElementById('app') 12 | ); -------------------------------------------------------------------------------- /demo/webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackPlugin = require('html-webpack-plugin') 2 | 3 | module.exports = { 4 | mode: 'development', 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.jsx?$/, 9 | exclude: /(node_modules)/, 10 | use: 'babel-loader' 11 | } 12 | ] 13 | }, 14 | plugins: [ 15 | new HtmlWebpackPlugin({ 16 | template: './src/index.html' 17 | }) 18 | ] 19 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jw-react-npm-boilerplate", 3 | "version": "1.0.1", 4 | "description": "React Boilerplate Component for npm", 5 | "homepage": "http://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm", 6 | "keywords": [ 7 | "React", 8 | "Boilerplate", 9 | "npm" 10 | ], 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/cornflourblue/jw-react-npm-boilerplate" 14 | }, 15 | "main": "./lib/BoilerplateComponent.js", 16 | "license": "MIT", 17 | "scripts": { 18 | "build": "webpack" 19 | }, 20 | "peerDependencies": { 21 | "prop-types": "^15.6.0", 22 | "react": "^16.0.0", 23 | "react-dom": "^16.0.0" 24 | }, 25 | "devDependencies": { 26 | "babel-core": "^6.21.0", 27 | "babel-loader": "^7.1.4", 28 | "babel-preset-env": "^1.6.1", 29 | "babel-preset-react": "^6.16.0", 30 | "babel-preset-stage-0": "^6.24.1", 31 | "path": "^0.12.7", 32 | "prop-types": "^15.6.0", 33 | "react": "^16.0.0", 34 | "react-dom": "^16.0.0", 35 | "webpack": "^4.5.0", 36 | "webpack-cli": "^3.2.1" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/BoilerplateComponent.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const propTypes = { 5 | label: PropTypes.string.isRequired, 6 | onChange: PropTypes.func.isRequired, 7 | styles: PropTypes.object 8 | } 9 | 10 | const defaultProps = { 11 | styles: { 12 | label: { 13 | fontFamily: 'Comic Sans MS', 14 | color: 'green' 15 | }, 16 | input: { 17 | background: '#ddd', 18 | border: '1px solid red' 19 | } 20 | } 21 | } 22 | 23 | class BoilerplateComponent extends React.Component { 24 | constructor(props) { 25 | super(props); 26 | this.handleChange = this.handleChange.bind(this); 27 | } 28 | 29 | handleChange(e) { 30 | this.props.onChange(e.target.value); 31 | } 32 | 33 | render() { 34 | const styles = this.props.styles || {}; 35 | 36 | return ( 37 |
38 | 39 | 40 |
41 | ); 42 | } 43 | } 44 | 45 | BoilerplateComponent.propTypes = propTypes; 46 | BoilerplateComponent.defaultProps = defaultProps; 47 | 48 | export default BoilerplateComponent; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = { 4 | mode: 'production', 5 | entry: './src/BoilerplateComponent.jsx', 6 | output: { 7 | path: path.resolve('lib'), 8 | filename: 'BoilerplateComponent.js', 9 | libraryTarget: 'commonjs2' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.jsx?$/, 15 | exclude: /(node_modules)/, 16 | use: 'babel-loader' 17 | } 18 | ] 19 | } 20 | } --------------------------------------------------------------------------------