https://github.com/kserjey/react-aqueduct

The bridge to convey data
https://github.com/kserjey/react-aqueduct

Last synced: 9 days ago
JSON representation

The bridge to convey data

• Host: GitHub
• URL: https://github.com/kserjey/react-aqueduct
• Owner: kserjey
• License: mit
• Created: 2018-03-19T08:07:57.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T00:53:02.000Z (almost 2 years ago)
• Last Synced: 2024-10-11T14:19:23.130Z (28 days ago)
• Language: JavaScript
• Homepage:
• Size: 2.43 MB
• Stars: 5
• Watchers: 2
• Forks: 3
• Open Issues: 28
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-render-props - react-aqueduct
• awesome-react-render-props - react-aqueduct

README

        
# react-aqueduct

> The bridge to convey ~~water~~ data

## Installation

```sh

npm install --save react-aqueduct

```

## Example

```js

import React from 'react';

import { createRequest } from 'react-aqueduct';

const PeopleSearch = createRequest([], ({ name }) =>

  fetch(`https://swapi.co/api/people/?search=${name}`)

    .then(response => response.json())

    .then(json => json.results),

);

const renderItem = item => 
{item.name}
;


class App extends React.Component {

  state = { name: '' };

  handleChange = ({ currentTarget }) => {

    this.setState({ name: currentTarget.value });

  };

  render() {

    return (

      

        
Star Wars Search

        

        

            isLoading ? 
Loading...
 : 
{data.map(renderItem)}

          }

        />

      

    );

  }

}


export default App;

```

See more examples on codesanbox:

1.  [Star Wars Search](https://codesandbox.io/s/72zwxl9p0)

2.  [Star Wars Search (with updateData)](https://codesandbox.io/s/6v71pwkq7w)

## API

### createRequest()

```js

createRequest(

  (initialValue: any),

  (mapPropsToRequest: (props: Object) => Promise),

  (options: Object),

);

```

Function that creates _request component_ - a component which fetches data and pass it via render props.

**`initialValue`**

Sets initial value of `data` before fetching is completed.

**`mapPropsToRequest`**

A function that takes component props and return request `Promise`. For example you can use `axios`:

```js

({ id }) => axios.get(`/api/users/${id}`);

```

**`options`**

### withRequest()

Higher-order component