├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE.txt
├── README.md
├── __tests__
└── react-data-loader.js
├── package.json
├── src
└── react-data-loader.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "es2015",
4 | "stage-0",
5 | "react"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | env: { es6: true },
3 | parser: "babel-eslint",
4 | plugins: ["react"],
5 | extends: [ "standard", "standard-react" ],
6 | globals: {
7 | $: false,
8 | jest: false,
9 | describe: false,
10 | pit: false,
11 | it: false,
12 | expect: false,
13 | beforeEach: false,
14 | jasmine: false,
15 | document: false
16 | },
17 | rules: {
18 | "object-curly-spacing": ["error", "always"],
19 | "comma-dangle": 0,
20 | "no-throw-literal": 1,
21 | "strict": [2, "never"],
22 | "semi": [2, "never"],
23 | "quotes": [2, "single"],
24 | "no-var": 1,
25 | "eol-last": 1,
26 | "no-undef": "error",
27 | "no-new-require": 1,
28 | "no-sync": 1,
29 | "no-mixed-requires": [1, false],
30 | "react/wrap-multilines": 2,
31 | "no-unsafe-finally": 0,
32 | "no-useless-computed-key": 0,
33 |
34 | "react/prop-types": 0,
35 | "react/jsx-uses-react": 1,
36 | "react/jsx-no-undef": 2,
37 | "react/jsx-sort-props": 0,
38 | "react/jsx-sort-prop-types": 0,
39 | "react/jsx-curly-spacing": ["error", "always"]
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 |
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | __tests__
3 | .babelrc
4 | .eslintrc
5 | .gitignore
6 | .travis.yml
7 | yarn.lock
8 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "stable"
4 | - "7"
5 | - "6"
6 | script:
7 | - npm run lint && npm run test
8 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2017 Lucas Constantino Silva
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of
4 | this software and associated documentation files (the "Software"), to deal in
5 | the Software without restriction, including without limitation the rights to
6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
7 | of the Software, and to permit persons to whom the Software is furnished to do
8 | so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Data Loader [](https://travis-ci.org/lucasconstantino/react-data-loader)
2 |
3 | > Dead simple data loader helper for React
4 |
5 | ## Disclaimer
6 |
7 | Use it not for big projects! If you project needs lots of API communication you'll be probably better off using tools such as [GraphQL](http://graphql.org/) (I personally recommend [Apollo](https://www.apollodata.com/) for that task) or even [Redux](http://redux.js.org/) with [`redux-thunk`](https://github.com/gaearon/redux-thunk). Sometimes, though, these are too much.
8 |
9 | ## Why this package?
10 |
11 | When loading external data in a React component - be it on user interaction or during mounting phase - we end up rewriting the same logic all over again: loading status, error responses, etc. This could be much simpler and a lot more standardized. Nowadays we use component composition and Higher-Order Components and they are cool. Let's use them.
12 |
13 | ## Inspiration
14 |
15 | I've lately being coding most of my projects using the Apollo stack. As with any API client, the [Apollo/React](https://github.com/apollographql/react-apollo) integration package provides easy data [request status and meta information](http://dev.apollodata.com/react/queries.html#default-result-props), right in the component as a simple prop. I wanted that when coding simpler projects too, but without API setup hassle :)
16 |
17 | ## Install
18 |
19 | `yarn add react-data-loader`
20 |
21 | > Or, good ol' `npm install --save react-data-loader`
22 |
23 | ## Usage
24 |
25 | This lib provides a single Higher-Order Component called `withDataLoader` with the following signature:
26 |
27 | ```js
28 | withDataLoader(
29 | propName: string,
30 | loader: (props: Object) => Function
31 | ): HigherOrderComponent
32 | ```
33 |
34 | This HoC will inject an object on the property defined by `propName`. The object will have these keys:
35 |
36 | key | type | default | description
37 | -----|------|---------|------------
38 | data | `any` | `undefined` | The resulting data. Can be anything you need.
39 | loading | `Boolean` | `false` | Whether or not the loader is currently fetching data.
40 | error | `any` | `null` | The failure result. Can be anything you need (most commonly an `Error` instance).
41 | requests | `Number` | `0` | The amount of times data was fetched using this loader.
42 | promise | `Promise` | `null` | The currently running data fetching promise.
43 | load | `Function` | | The data fetch dispatcher function. Can be called with whatever arguments your `loader` accepts.
44 |
45 | The `loader` argument of `withDataLoader` is where the fun happens. It follows a similar specification as that of the [`withHandlers` from Recompose](https://github.com/acdlite/recompose/blob/master/docs/API.md#withhandlers) lib: it must be a Higher-Order Function which will receive `props` and must return a function responsible for fetching data.
46 |
47 | ### Simple as can
48 |
49 | ```js
50 | import { withDataLoader } from 'react-data-loader'
51 |
52 | const MyDataLoaderComponent = ({ someProp }) => (
53 |
54 | { JSON.stringify(someProp.data) }
55 | Load!
56 |
57 | )
58 |
59 | // Using Fetch API.
60 | const loader = props => e => fetch('/api/data.json').then(res => res.json())
61 |
62 | export default withDataLoader('someProp', loader)(MyDataLoaderComponent)
63 | ```
64 |
65 | ## License
66 |
67 | Copyright (c) 2017 Lucas Constantino Silva
68 |
69 | Permission is hereby granted, free of charge, to any person obtaining a copy of
70 | this software and associated documentation files (the "Software"), to deal in
71 | the Software without restriction, including without limitation the rights to
72 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
73 | of the Software, and to permit persons to whom the Software is furnished to do
74 | so, subject to the following conditions:
75 |
76 | The above copyright notice and this permission notice shall be included in all
77 | copies or substantial portions of the Software.
78 |
79 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
80 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
81 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
82 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
83 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
84 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
85 | SOFTWARE.
86 |
--------------------------------------------------------------------------------
/__tests__/react-data-loader.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { mount } from 'enzyme'
3 | import { withDataLoader } from '../src/react-data-loader'
4 |
5 | describe('withDataLoader', () => {
6 | const fetcher = jest.fn(() => 'Loaded data!')
7 | const loader = props => fetcher
8 | const errorLoader = jest.fn(props => e => { throw new Error('Some error') })
9 |
10 | const DataLoadingComponent = ({ data }) => (
11 |
12 | { JSON.stringify(data) }
13 | Load
14 |
15 | )
16 |
17 | beforeEach(() => jest.clearAllMocks())
18 |
19 | it('should be a Higher-Order Component', () => {
20 | const connect = withDataLoader('data', loader)
21 | const ConnectedComponent = connect(DataLoadingComponent)
22 | const build = mount(