Skip to content
This repository has been archived by the owner on Nov 11, 2023. It is now read-only.

Commit

Permalink
Fix #2: Add codesandbox links
Browse files Browse the repository at this point in the history
  • Loading branch information
Tejas Kumar committed Aug 8, 2018
1 parent c9b4659 commit 87229c4
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
14 changes: 14 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ As an abstraction, this tool allows for greater consistency and maintainability

At its core, RESTful React exposes a component, called `Get`. This component retrieves data, either on mount or later, and then handles error states, caching, loading states, and other cases for you. As such, you simply get a component that _gets stuff_ and then does stuff with it. Here's a quick overview what it looks like.

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
import React from "react";
import Get from "restful-react";
Expand All @@ -61,6 +63,8 @@ API endpoints usually sit alongside a base, global URL. As a convenience, the `R

Consider,

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
import React from "react";
import { RestfulProvider } from "restful-react";
Expand Down Expand Up @@ -128,6 +132,8 @@ Here's some docs about the [RequestInit](https://developer.mozilla.org/en-US/doc

`Get` components can be composed together and request URLs at an accumulation of their collective path props. Consider,

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
// Assuming we're using a RestfulProvider with base={HOST} somewhere,
import React from "react";
Expand Down Expand Up @@ -210,6 +216,8 @@ interface Get<TData, TError> {

`Get` components pass down loading and error states to their children, to allow for state handling. Consider,

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
const MyAnimalsList = props => (
<Get path={`/${props.animal}`}>
Expand Down Expand Up @@ -258,6 +266,8 @@ const MyAnimalsList = props => (

It is possible to render a `Get` component and defer the fetch to a later stage. This is done with the `lazy` boolean prop. This is great for displaying UI immediately, and then allowing parts of it to be fetched as a response to an event: like the click of a button, for instance. Consider,

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
<Get path="/unicorns" lazy>
{(unicorns, states, { get }) => (
Expand All @@ -280,6 +290,8 @@ Sometimes, your backend responses arrive in a shape that you might want to adapt
At the `RestfulProvider` level, _or_ on the `Get` level, a `resolve` prop will take the data and _do stuff_ to it, providing the final resolved data to the children. Consider,
[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)
```jsx
const myNestedData = props => (
<Get
Expand All @@ -306,6 +318,8 @@ One of the most poweful features of RESTful React, each component exported is st

Restful React exposes an additional component called `Mutate`. These components allow sending requests with other HTTP verbs in order to mutate backend resources.

[![Edit Restful React demos](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/30n66z45mq)

```jsx
const Movies = ({ dispatch }) => (
<ul>
Expand Down
4 changes: 2 additions & 2 deletions src/Poll.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -232,13 +232,13 @@ class ContextlessPoll<TData, TError> extends React.Component<

public start = async () => {
this.keepPolling = true;
this.setState(() => ({ polling: true })); // let everyone know we're done here.}
this.setState(() => ({ polling: true })); // let everyone know we're done here.
this.cycle();
};

public stop = async () => {
this.keepPolling = false;
this.setState(() => ({ polling: false, finished: true })); // let everyone know we're done here.}
this.setState(() => ({ polling: false, finished: true })); // let everyone know we're done here.
};

public componentDidMount() {
Expand Down

0 comments on commit 87229c4

Please sign in to comment.