├── .babelrc
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── package.json
├── src
├── index.js
└── render-with-params.js
└── test
└── render-with-params.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "react"
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "env": {
4 | "mocha": true
5 | },
6 | "rules": {
7 | "semi": [2, "never"],
8 | "react/prefer-stateless-function": 0,
9 | "react/prefer-es6-class": 0
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - "6"
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Michele Bertoli
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 | [](https://travis-ci.org/MicheleBertoli/react-render-with-params)
2 |
3 | # react-render-with-params
4 |
5 | I've been using [Preact](https://preactjs.com/) recently and I loved the way props, state and context are passed to the render method.
6 | It feels like writing functional components and it's great for destructuring.
7 |
8 | That's what the `renderWithParams` higher order component is about.
9 |
10 | ## Installation
11 |
12 | ```bash
13 | npm i react-render-with-params --save
14 | ```
15 |
16 | ## Usage
17 |
18 | ```javascript
19 | import React, { PropTypes } from 'react'
20 | import { render } from 'react-dom'
21 | import renderWithParams from 'react-render-with-params'
22 |
23 | const Yo = React.createClass({
24 | contextTypes: {
25 | myContext: PropTypes.string,
26 | },
27 | getInitialState() {
28 | return {
29 | myState: 'myState',
30 | }
31 | },
32 | render({ myProps }, { myState }, { myContext }) {
33 | return {myProps} {myState} {myContext}
34 | },
35 | })
36 |
37 | const SuperYo = renderWithParams(Yo)
38 |
39 | render(, document.getElementById('app'))
40 | ```
41 |
42 | ## Test
43 |
44 | ```bash
45 | npm test
46 | ```
47 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-render-with-params",
3 | "version": "0.1.0",
4 | "description": "The render method you've always wanted",
5 | "main": "dist/index.js",
6 | "files": [
7 | "dist"
8 | ],
9 | "scripts": {
10 | "test": "mocha --compilers js:babel-register --reporter emoji-reporter",
11 | "build": "babel ./src --out-dir ./dist",
12 | "prepublish": "npm run build"
13 | },
14 | "repository": {
15 | "type": "git",
16 | "url": "git+https://github.com/MicheleBertoli/react-render-with-params.git"
17 | },
18 | "keywords": [
19 | "react-component",
20 | "render"
21 | ],
22 | "author": "Michele Bertoli",
23 | "license": "MIT",
24 | "bugs": {
25 | "url": "https://github.com/MicheleBertoli/react-render-with-params/issues"
26 | },
27 | "homepage": "https://github.com/MicheleBertoli/react-render-with-params#readme",
28 | "devDependencies": {
29 | "babel-cli": "^6.10.1",
30 | "babel-preset-es2015": "^6.9.0",
31 | "babel-preset-react": "^6.11.1",
32 | "babel-register": "^6.9.0",
33 | "emoji-reporter": "^0.3.0",
34 | "enzyme": "^2.4.1",
35 | "eslint": "^3.0.1",
36 | "eslint-config-airbnb": "^9.0.1",
37 | "eslint-plugin-import": "^1.10.2",
38 | "eslint-plugin-jsx-a11y": "^2.0.1",
39 | "eslint-plugin-react": "^5.2.2",
40 | "mocha": "^2.5.3",
41 | "react": "^15.2.1",
42 | "react-addons-test-utils": "^15.2.1",
43 | "react-dom": "^15.2.1"
44 | },
45 | "peerDependencies": {
46 | "react": "^15.2.1",
47 | "react-dom": "^15.2.1"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default } from './render-with-params'
2 |
--------------------------------------------------------------------------------
/src/render-with-params.js:
--------------------------------------------------------------------------------
1 | export default Component => class extends Component {
2 | render() {
3 | return super.render(this.props, this.state || {}, this.context)
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/test/render-with-params.js:
--------------------------------------------------------------------------------
1 | import assert from 'assert'
2 | import React, { PropTypes } from 'react'
3 | import { shallow } from 'enzyme'
4 |
5 | import renderWithParams from '../src'
6 |
7 | describe('renderWithParams', () => {
8 | it('works', () => {
9 | const Dummy = renderWithParams(React.createClass({
10 | contextTypes: {
11 | myContext: PropTypes.string,
12 | },
13 | render({ myProps }, { myState }, { myContext }) {
14 | return {myProps} {myState} {myContext}
15 | },
16 | }))
17 |
18 | const context = { myContext: 'baz' }
19 | const wrapper = shallow(, { context })
20 | wrapper.setProps({ myProps: 'foo' })
21 | wrapper.setState({ myState: 'bar' })
22 |
23 | assert.equal(wrapper.text(), 'foo bar baz')
24 | })
25 | })
26 |
--------------------------------------------------------------------------------