Declarative version of React.Component.
113 |Because sometimes you want a lifecycle or some state but don't want to create a new component. Also, this stuff is composable as heck.
115 |npm install react-component-component
117 | # or
118 | yarn add react-component-component
119 | And then import it:
121 |// using es modules
122 | import Component from "react-component-component";
123 |
124 | // common.js
125 | const Component = require("react-component-component");
126 |
127 | // AMD
128 | // I've forgotten but it should work.
129 | Or use script tags and globals.
131 |<script src="https://unpkg.com/react-component-component"></script>
132 | And then grab it off the global like so:
134 |const Component = ReactComponentComponent;
135 | Let's say you want some async data but don't want to make a whole new component just for the lifecycles to get it:
138 |// import Component from 'react-component-component'
139 | const Component = ReactComponentComponent;
140 |
141 | ReactDOM.render(
142 | <div>
143 | <h2>Let's get some gists!</h2>
144 | <Component
145 | initialState={{ gists: null }}
146 | didMount={({ setState }) => {
147 | fetch("https://api.github.com/gists")
148 | .then(res => res.json())
149 | .then(gists => setState({ gists }));
150 | }}
151 | >
152 | {({ state }) =>
153 | state.gists ? (
154 | <ul>
155 | {state.gists.map(gist => (
156 | <li key={gist.id}>{gist.description}</li>
157 | ))}
158 | </ul>
159 | ) : (
160 | <div>Loading...</div>
161 | )
162 | }
163 | </Component>
164 | </div>,
165 | DOM_NODE
166 | );
167 | Or maybe you need a little bit of state but an entire component 204 | seems a bit heavy:
205 |// import Component from 'react-component-component'
206 | const Component = ReactComponentComponent;
207 |
208 | ReactDOM.render(
209 | <Component initialState={{ count: 0 }}>
210 | {({ setState, state }) => (
211 | <div>
212 | <h2>Every app needs a counter!</h2>
213 | <button
214 | onClick={() =>
215 | setState(state => ({ count: state.count - 1 }))
216 | }
217 | >
218 | -
219 | </button>
220 | <span> {state.count} </span>
221 | <button
222 | onClick={() =>
223 | setState(state => ({ count: state.count + 1 }))
224 | }
225 | >
226 | +
227 | </button>
228 | </div>
229 | )}
230 | </Component>,
231 | DOM_NODE
232 | );
233 | You know all of these already:
270 |didMount({ state, setState, props, forceUpdate })shouldUpdate({ state, props, nextProps, nextState })didUpdate({ state, setState, props, forceUpdate, prevProps, prevState })willUnmount({ state, props })children({ state, setState, props, forceUpdate })render({ state, setState, props, forceUpdate })Released under MIT license.
280 |Copyright © 2017-present Ryan Florence
281 | 282 | 283 | 284 | 285 | 286 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@reactions/component", 3 | "version": "2.0.2", 4 | "description": "Declarative Version of React.Component", 5 | "main": "index.js", 6 | "module": "es/index.js", 7 | "files": [ 8 | "es", 9 | "index.js", 10 | "umd" 11 | ], 12 | "scripts": { 13 | "build": "node build/build.js" 14 | }, 15 | "peerDependencies": { 16 | "react": "15.x || 16.x" 17 | }, 18 | "devDependencies": { 19 | "babel-cli": "^6.26.0", 20 | "babel-core": "^6", 21 | "babel-eslint": "^7.2.3", 22 | "babel-plugin-dev-expression": "^0.2.1", 23 | "babel-plugin-external-helpers": "^6.22.0", 24 | "babel-plugin-transform-class-properties": "^6.24.1", 25 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 26 | "babel-preset-env": "^1.6.1", 27 | "babel-preset-react": "^6.24.1", 28 | "eslint": "^4.18.2", 29 | "eslint-config-react-app": "^2.1.0", 30 | "eslint-plugin-flowtype": "^2.34.1", 31 | "eslint-plugin-import": "^2.9.0", 32 | "eslint-plugin-jsx-a11y": "^5.1.1", 33 | "eslint-plugin-react": "^7.1.0", 34 | "gzip-size": "^4.1.0", 35 | "prettier": "^1.10.2", 36 | "pretty-bytes": "^4.0.2", 37 | "react": "^16.3.0", 38 | "react-dom": "^16.3.0", 39 | "render-markdown-js": "^1.3.0", 40 | "rollup": "^0.56.3", 41 | "rollup-plugin-babel": "^3.0.3", 42 | "rollup-plugin-commonjs": "^8.3.0", 43 | "rollup-plugin-node-resolve": "^3.0.3", 44 | "rollup-plugin-replace": "^2.0.0", 45 | "rollup-plugin-uglify": "^3.0.0" 46 | }, 47 | "author": "Ryan Florence", 48 | "license": "MIT", 49 | "repository": { 50 | "type": "git", 51 | "url": "git+https://github.com/reactions/component.git" 52 | }, 53 | "keywords": [ 54 | "react", 55 | "component", 56 | "react component" 57 | ], 58 | "prettier": { 59 | "printWidth": 72 60 | }, 61 | "eslintConfig": { 62 | "extends": "react-app" 63 | }, 64 | "bugs": { 65 | "url": "https://github.com/reactions/component/issues" 66 | }, 67 | "homepage": "https://github.com/reactions/component#readme" 68 | } 69 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from 'rollup-plugin-babel'; 2 | import uglify from 'rollup-plugin-uglify'; 3 | import replace from 'rollup-plugin-replace'; 4 | import commonjs from 'rollup-plugin-commonjs'; 5 | import resolve from 'rollup-plugin-node-resolve'; 6 | 7 | const config = { 8 | input: 'src/index.js', 9 | output: { 10 | name: 'ReactionsComponent', 11 | globals: { 12 | react: 'React', 13 | }, 14 | }, 15 | external: ['react'], 16 | plugins: [ 17 | babel({ 18 | exclude: 'node_modules/**', 19 | }), 20 | resolve(), 21 | commonjs({ 22 | include: /node_modules/, 23 | }), 24 | replace({ 25 | 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV), 26 | }), 27 | ], 28 | }; 29 | 30 | if (process.env.NODE_ENV === 'production') { 31 | config.plugins.push(uglify()); 32 | } 33 | 34 | export default config; 35 | -------------------------------------------------------------------------------- /src/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ "../build/babel-preset" ] 3 | } 4 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Component extends React.Component { 4 | state = this.props.initialState; 5 | _setState = (...args) => this.setState(...args); 6 | _forceUpdate = (...args) => this.forceUpdate(...args); 7 | 8 | getArgs() { 9 | const {state, props, _setState: setState, _forceUpdate: forceUpdate} = this; 10 | return { 11 | state, 12 | props, 13 | setState, 14 | forceUpdate, 15 | }; 16 | } 17 | 18 | componentDidMount() { 19 | if (this.props.didMount) this.props.didMount(this.getArgs()); 20 | } 21 | 22 | shouldComponentUpdate(nextProps, nextState) { 23 | if (this.props.shouldUpdate) 24 | return this.props.shouldUpdate({ 25 | props: this.props, 26 | state: this.state, 27 | nextProps, 28 | nextState, 29 | }); 30 | else return true; 31 | } 32 | 33 | componentWillUnmount() { 34 | if (this.props.willUnmount) 35 | this.props.willUnmount({ 36 | state: this.state, 37 | props: this.props, 38 | }); 39 | } 40 | 41 | componentDidUpdate(prevProps, prevState) { 42 | if (this.props.didUpdate) 43 | this.props.didUpdate( 44 | Object.assign(this.getArgs(), { 45 | prevProps, 46 | prevState, 47 | }), 48 | ); 49 | } 50 | 51 | render() { 52 | const {children, render} = this.props; 53 | return children 54 | ? typeof children === 'function' ? children(this.getArgs()) : children 55 | : render ? render(this.getArgs()) : null; 56 | } 57 | } 58 | 59 | export default Component; 60 | -------------------------------------------------------------------------------- /templates/footer.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |