├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitignore ├── .huskyrc ├── .lintstagedrc ├── .prettierignore ├── .prettierrc ├── LICENSE.md ├── README.md ├── examples ├── index.html └── index.js ├── package.json ├── src ├── Checkbox.tsx ├── CheckboxGroup.tsx ├── __snapshots__ │ └── index.test.js.snap ├── context.ts ├── index.test.js ├── index.ts └── types.ts ├── tsconfig.json ├── types.d.ts ├── webpack.config.js ├── config.base.js ├── config.development.js ├── config.production.js └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "compact": true, 3 | "presets": [ 4 | [ 5 | "@babel/preset-env", 6 | { 7 | "modules": false, 8 | "targets": { 9 | "browsers": ["last 2 versions", "ie >= 9"] 10 | } 11 | } 12 | ], 13 | "@babel/preset-react", 14 | "@babel/preset-typescript" 15 | ], 16 | "plugins": [ 17 | "@babel/plugin-proposal-object-rest-spread", 18 | "@babel/plugin-proposal-class-properties" 19 | ], 20 | "env": { 21 | "test": { 22 | "plugins": ["@babel/plugin-transform-modules-commonjs"] 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 4 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [*.json] 16 | indent_size = 2 17 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | lib/* 2 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "__DEV__": true 4 | }, 5 | "extends": ["wiremore", "wiremore/react", "wiremore/typescript"], 6 | "rules": { 7 | "import/named": 0, 8 | "import/no-unassigned-import": 0, 9 | "import/no-named-as-default-member": 0, 10 | "prettier/prettier": "error", 11 | "react-hooks/exhaustive-deps": 1 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 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 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | dist 61 | es 62 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "post-merge": "install-deps-postmerge", 4 | "pre-commit": "lint-staged" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{js,jsx,ts,tsx,css}": [ 3 | "prettier --write", 4 | "git add" 5 | ], 6 | "*.{js,jsx,ts,tsx}": [ 7 | "yarn lint:js --fix", 8 | "git add" 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | lib/* 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | printWidth: 100 2 | singleQuote: true 3 | tabWidth: 4 4 | trailingComma: es5 5 | semi: true 6 | arrowParens: always 7 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Manuel Bieh 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 | # ⚛ React Checkbox Context 2 | 3 | This package was heavily inspired by [react-checkbox-group](https://github.com/ziad-saab/react-checkbox-group) after it stopped working the way I used it. `` elements suddenly had to be direct children of `` (which was impossible for my use case) or the `CheckboxGroup` explicitly needed to have a `checkboxDepth` prop (which was not flexible enough for me). So I decided to write my own `` component based on React's (then) new [Context API](https://reactjs.org/docs/context.html). 4 | 5 | Big thank you to [Ziad Saab](https://github.com/ziad-saab) for the inspiration! 6 | 7 | ## Installation 8 | 9 | ``` 10 | npm install react-checkbox-context 11 | ``` 12 | 13 | or 14 | 15 | ``` 16 | yarn add react-checkbox-context 17 | ``` 18 | 19 | ## Example 20 | 21 | What does `react-checkbox-context` do and how does it do that? Let me borrow the example from `react-checkbox-group` since the API is mostly identical: 22 | 23 | This is your average checkbox group: 24 | 25 | ```jsx 26 |
27 | Apple 28 | Orange 29 | {' '} 30 | Watermelon 31 |
32 | ``` 33 | 34 | Repetitive, hard to manipulate and easily desynchronized. Lift up name and onChange, and give the group an initial checked values array: 35 | 36 | ```jsx 37 | import { Checkbox, CheckboxGroup } from 'react-checkbox-context'; 38 | 39 | 40 | Kiwi 41 | Pineapple 42 | Watermelon 43 | ; 44 | ``` 45 | 46 | Since this component uses React's Context API, `` elements can by anywhere inside of a `` and **do not** have to be a direct descendant! So this is easily possible **without** having to specify any `checkboxDepth` props or the like: 47 | 48 | ```jsx 49 | { 52 | console.log(selectedValues); 53 | }} 54 | > 55 |

56 | 59 |

60 |

61 | 64 |

65 | 66 | ``` 67 | 68 | **Attention:** When migrating from `react-checkbox-group` please note that the prop name to pass the values to a `CheckboxGroup` is named `values` instead of `value`. 69 | 70 | ## Props 71 | 72 | ### `` 73 | 74 | | Prop | Type | Description | 75 | | ---------- | ------------------------------------------------ | ---------------------------------------------------------- | 76 | | `onChange` | `(event: ChangeEvent, values: string[]) => void` | Will be called on every time a checkbox changes its state. | 77 | | `name` | `string` | Name for all checkboxes within one `` | 78 | | `values` | `string[]` | Values of the `` elements marked as `checked` | 79 | 80 | Status of checkboxes (checked/unchecked) can be controlled from outside by passing new values to `` (e.g. ``). 81 | 82 | ### `` 83 | 84 | The `Checkbox` component passes all of its props the the underlying `` element. All valid HTML attributes can be used with the exception of `checked`, `name`, `onChange` as they will be set by the parent `` component. 85 | 86 | ## Todo 87 | 88 | - Add more tests, more specifically a test if `onChange` events are fired correctly. 89 | 90 | ## License 91 | 92 | MIT. 93 | -------------------------------------------------------------------------------- /examples/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Checkbox, CheckboxGroup } from '../src'; 4 | 5 | const Examples = () => { 6 | const [checkedValues, setCheckedValues] = useState(['2', '3']); 7 | const check1and3 = () => { 8 | setCheckedValues(['1', '3']); 9 | }; 10 | 11 | const checkAll = () => { 12 | setCheckedValues(['1', '2', '3']); 13 | }; 14 | 15 | const uncheckAll = () => { 16 | setCheckedValues([]); 17 | }; 18 | 19 | return ( 20 |
21 |

22 | 23 | 24 | 25 |

26 | { 30 | setCheckedValues(values); 31 | }} 32 | > 33 | 36 | 39 | 42 | 43 | 
Checked values: {JSON.stringify(checkedValues, null, 2)}
44 |
45 | ); 46 | }; 47 | 48 | ReactDOM.render(, document.getElementById('example')); 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-checkbox-context", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "dist/umd/index.js", 6 | "module": "dist/es/index.js", 7 | "types": "dist/types/index.d.ts", 8 | "scripts": { 9 | "build:es": "cross-env NODE_ENV=production babel -d dist/es --extensions=.ts,.tsx,.js,.jsx --ignore **/*.test.js src", 10 | "build:types": "tsc --outDir dist/types --emitDeclarationOnly --noEmit false --declaration --allowJs false --checkJs false", 11 | "build:bundle": "cross-env NODE_ENV=production webpack", 12 | "build": "yarn-or-npm clean && concurrently \"yarn-or-npm build:es\" \"yarn-or-npm build:bundle\" \"yarn-or-npm build:types\"", 13 | "clean": "rimraf ./dist", 14 | "lint:js": "eslint ./src", 15 | "start": "webpack-dev-server", 16 | "test": "jest src", 17 | "transpile": "cross-env NODE_ENV=production yarn-or-npm build:es", 18 | "tsc": "tsc --noEmit" 19 | }, 20 | "files": [ 21 | "dist", 22 | "src", 23 | "README.md", 24 | "LICENSE.md" 25 | ], 26 | "keywords": [], 27 | "author": "Manuel Bieh (https://github.com/manuelbieh)", 28 | "license": "MIT", 29 | "devDependencies": { 30 | "@babel/cli": "^7.2.3", 31 | "@babel/core": "^7.2.2", 32 | "@babel/plugin-proposal-class-properties": "^7.2.3", 33 | "@babel/plugin-proposal-object-rest-spread": "^7.2.0", 34 | "@babel/plugin-syntax-dynamic-import": "^7.2.0", 35 | "@babel/plugin-transform-modules-commonjs": "^7.2.0", 36 | "@babel/preset-env": "^7.2.3", 37 | "@babel/preset-react": "^7.0.0", 38 | "@babel/preset-typescript": "^7.3.3", 39 | "@types/react": "^16.8.22", 40 | "@types/react-dom": "^16.8.4", 41 | "@typescript-eslint/eslint-plugin": "^1.7.0", 42 | "@typescript-eslint/parser": "^1.7.0", 43 | "babel-core": "^7.0.0-bridge.0", 44 | "babel-eslint": "10.0.1", 45 | "babel-jest": "^24.8.0", 46 | "babel-loader": "^8.0.5", 47 | "case-sensitive-paths-webpack-plugin": "^2.2.0", 48 | "concurrently": "^4.1.1", 49 | "cross-env": "^5.1.4", 50 | "eslint": "^5.16.0", 51 | "eslint-config-prettier": "^4.3.0", 52 | "eslint-config-wiremore": "^3.0.4", 53 | "eslint-import-resolver-typescript": "^1.1.1", 54 | "eslint-plugin-babel": "^5.3.0", 55 | "eslint-plugin-import": "^2.17.3", 56 | "eslint-plugin-prettier": "^3.1.0", 57 | "eslint-plugin-react": "^7.13.0", 58 | "eslint-plugin-react-hooks": "^1.6.0", 59 | "eslint-plugin-security": "^1.4.0", 60 | "eslint-plugin-unicorn": "^9.1.0", 61 | "html-webpack-plugin": "^3.2.0", 62 | "husky": "^3.0.0", 63 | "install-deps-postmerge": "^1.0.3", 64 | "jest": "^24.8.0", 65 | "lint-staged": "^9.0.2", 66 | "prettier": "^1.18.2", 67 | "react": "^16.8.6", 68 | "react-dom": "^16.8.6", 69 | "react-test-renderer": "^16.7.0", 70 | "rimraf": "^2.6.3", 71 | "typescript": "^3.5.2", 72 | "uppercamelcase": "^3.0.0", 73 | "webpack": "^4.28.4", 74 | "webpack-cli": "^3.2.1", 75 | "webpack-dev-server": "^3.7.2", 76 | "write-file-webpack-plugin": "^4.5.0", 77 | "yarn-or-npm": "^2.0.4" 78 | }, 79 | "peerDependencies": { 80 | "react": "^16.8.6", 81 | "react-dom": "^16.8.6" 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/Checkbox.tsx: -------------------------------------------------------------------------------- 1 | // @flow 2 | import React from 'react'; 3 | import CheckboxContext from './context'; 4 | 5 | type Props = { 6 | value: string; 7 | }; 8 | 9 | const Checkbox = ({ value, ...props }: Props) => { 10 | const { name, values, onChange } = React.useContext(CheckboxContext); 11 | return ( 12 | 20 | ); 21 | }; 22 | 23 | export default Checkbox; 24 | -------------------------------------------------------------------------------- /src/CheckboxGroup.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useMemo, useState } from 'react'; 2 | import { Provider } from './context'; 3 | import { ProviderProps } from './types'; 4 | 5 | const CheckboxGroup = ({ children, values: passedValues = [], name, onChange }: ProviderProps) => { 6 | const [values, setValues] = useState(passedValues); 7 | 8 | React.useEffect(() => { 9 | setValues(passedValues); 10 | }, [passedValues]); 11 | 12 | const removeValue = useCallback( 13 | (originalEvent: React.ChangeEvent, value: string) => { 14 | const nextValues = values.includes(value) 15 | ? values.slice().filter((item) => item !== value) 16 | : values; 17 | 18 | setValues(nextValues); 19 | 20 | if (typeof onChange === 'function') { 21 | onChange(originalEvent, nextValues); 22 | } 23 | }, 24 | [onChange, values] 25 | ); 26 | 27 | const addValue = useCallback( 28 | (originalEvent: React.ChangeEvent, value: string) => { 29 | const nextValues = 30 | values.includes(value) === true ? values : values.slice().concat(value); 31 | 32 | setValues(nextValues); 33 | 34 | if (typeof onChange === 'function') { 35 | onChange(originalEvent, nextValues); 36 | } 37 | }, 38 | [onChange, values] 39 | ); 40 | 41 | const changeHandler = useCallback( 42 | (e: React.ChangeEvent) => { 43 | e.persist(); 44 | 45 | const { 46 | currentTarget: { value, checked }, 47 | } = e; 48 | 49 | if (checked) { 50 | addValue(e, value); 51 | } else { 52 | removeValue(e, value); 53 | } 54 | }, 55 | [addValue, removeValue] 56 | ); 57 | 58 | const contextValue = useMemo( 59 | () => ({ 60 | onChange: changeHandler, 61 | values, 62 | name, 63 | }), 64 | [changeHandler, name, values] 65 | ); 66 | 67 | return {children}; 68 | }; 69 | 70 | export default CheckboxGroup; 71 | -------------------------------------------------------------------------------- /src/__snapshots__/index.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`CheckboxGroup correctly sets "checked" attribute 1`] = ` 4 | Array [ 5 | , 12 | , 19 | ] 20 | `; 21 | 22 | exports[`CheckboxGroup renders correctly when deeply nested 1`] = ` 23 |
24 |
25 | 32 | 39 |
40 |
41 | `; 42 | -------------------------------------------------------------------------------- /src/context.ts: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ContextValue } from './types'; 3 | 4 | const Context = React.createContext({ 5 | name: '', 6 | values: [], 7 | }); 8 | 9 | export const Consumer = Context.Consumer; 10 | export const Provider = Context.Provider; 11 | 12 | export default Context; 13 | -------------------------------------------------------------------------------- /src/index.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import renderer from 'react-test-renderer'; 3 | import { CheckboxGroup, Checkbox } from '.'; 4 | 5 | describe('CheckboxGroup', () => { 6 | it('correctly sets "checked" attribute', () => { 7 | expect( 8 | renderer 9 | .create( 10 | 11 | 12 | 13 | 14 | ) 15 | .toJSON() 16 | ).toMatchSnapshot(); 17 | }); 18 | 19 | it('renders correctly when deeply nested', () => { 20 | expect( 21 | renderer 22 | .create( 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 | 31 | ) 32 | .toJSON() 33 | ).toMatchSnapshot(); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox'; 2 | import CheckboxGroup from './CheckboxGroup'; 3 | 4 | export { default as Checkbox } from './Checkbox'; 5 | export { default as CheckboxGroup } from './CheckboxGroup'; 6 | 7 | export default { 8 | Checkbox, 9 | CheckboxGroup, 10 | }; 11 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | export type ContextValue = { 2 | name: string; 3 | onChange?: (e: React.ChangeEvent) => void; 4 | values: string[]; 5 | }; 6 | 7 | export type ProviderProps = { 8 | children: React.ReactNode; 9 | values?: string[]; 10 | name: string; 11 | onChange?: (e: React.ChangeEvent, values: string[]) => void; 12 | }; 13 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "checkJs": true, 6 | "allowJs": true, 7 | "skipLibCheck": true, 8 | "esModuleInterop": true, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "noEmit": true, 16 | "jsx": "preserve", 17 | "baseUrl": "./src", 18 | "strictNullChecks": true 19 | }, 20 | "include": ["src", "examples"] 21 | } 22 | -------------------------------------------------------------------------------- /types.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | export declare type ContextValue = { 3 | name: string; 4 | onChange?: (e: React.ChangeEvent) => void; 5 | values: string[]; 6 | }; 7 | export declare type ProviderProps = { 8 | children: React.ReactNode; 9 | values?: string[]; 10 | name: string; 11 | onChange?: (e: React.ChangeEvent, values: string[]) => void; 12 | }; 13 | -------------------------------------------------------------------------------- /webpack.config.js/config.base.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); 4 | const camelCase = require('uppercamelcase'); 5 | // const WriteFilePlugin = require('write-file-webpack-plugin'); 6 | 7 | module.exports = { 8 | stats: { 9 | children: false, 10 | }, 11 | resolve: { 12 | extensions: ['.js', '.jsx', '.ts', '.tsx'], 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.(j|t)sx?$/, 18 | exclude: /node_modules/, 19 | use: [{ loader: 'babel-loader' }], 20 | }, 21 | ], 22 | }, 23 | plugins: [ 24 | new CaseSensitivePathsPlugin(), 25 | new webpack.DefinePlugin({ 26 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 27 | }), 28 | new webpack.NamedModulesPlugin(), 29 | // new WriteFilePlugin(), 30 | ], 31 | output: { 32 | libraryTarget: 'umd', 33 | library: camelCase(require(path.resolve(__dirname, '..', 'package.json')).name), 34 | filename: '[name].js', 35 | // this is a weird hack to make the umd build work in node 36 | // https://github.com/webpack/webpack/issues/6525#issuecomment-417580843 37 | globalObject: 'typeof self !== "undefined" ? self : this', 38 | }, 39 | }; 40 | -------------------------------------------------------------------------------- /webpack.config.js/config.development.js: -------------------------------------------------------------------------------- 1 | // const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const config = require('./config.base'); 4 | 5 | config.entry = { 6 | example: './examples', 7 | }; 8 | 9 | config.mode = 'development'; 10 | config.devServer = { 11 | // contentBase: path.join(__dirname, '..'), 12 | compress: true, 13 | port: 9000, 14 | }; 15 | 16 | config.plugins = config.plugins.concat([ 17 | new HtmlWebpackPlugin({ 18 | template: 'examples/index.html', 19 | }), 20 | ]); 21 | 22 | module.exports = config; 23 | -------------------------------------------------------------------------------- /webpack.config.js/config.production.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const camelCase = require('uppercamelcase'); 3 | const config = require('./config.base'); 4 | 5 | module.exports = Object.assign({}, config, { 6 | entry: { 7 | index: './src', 8 | }, 9 | mode: 'production', 10 | resolve: { 11 | extensions: ['.js', '.jsx', '.ts', '.tsx'], 12 | }, 13 | module: { 14 | rules: [ 15 | { 16 | test: /\.(j|t)sx?$/, 17 | exclude: /node_modules/, 18 | use: [{ loader: 'babel-loader' }], 19 | }, 20 | ], 21 | }, 22 | externals: { 23 | react: { 24 | root: 'React', 25 | commonjs2: 'react', 26 | commonjs: 'react', 27 | amd: 'react', 28 | }, 29 | 'react-dom': { 30 | root: 'ReactDOM', 31 | commonjs2: 'react-dom', 32 | commonjs: 'react-dom', 33 | amd: 'react-dom', 34 | }, 35 | }, 36 | output: { 37 | path: path.resolve(__dirname, '..', 'dist', 'umd'), 38 | publicPath: 'dist/umd', 39 | libraryTarget: 'umd', 40 | library: camelCase(require(path.resolve(__dirname, '..', 'package.json')).name), 41 | filename: '[name].js', 42 | // this is a weird hack to make the umd build work in node 43 | // https://github.com/webpack/webpack/issues/6525#issuecomment-417580843 44 | globalObject: 'typeof self !== "undefined" ? self : this', 45 | }, 46 | }); 47 | -------------------------------------------------------------------------------- /webpack.config.js/index.js: -------------------------------------------------------------------------------- 1 | module.exports = (env = 'development') => { 2 | if (process.env.NODE_ENV === 'production') { 3 | return require('./config.production'); 4 | } 5 | 6 | if (env === 'production') { 7 | process.env.NODE_ENV = 'production'; 8 | } 9 | 10 | return require(`./config.${env}`); 11 | }; 12 | --------------------------------------------------------------------------------