with-rest
Inspired by the react-apollo syntax, this simple wrapper extends restful-react and allowing to visually separate the logic of REST queries from the component itself.
Getting Started
To install and use this library, simply yarn add with-rest
, or npm i with-rest --save
and you should be good to go. Don't forget to import { withRest } from "with-rest"
or similar wherever you need it!
Examples
Example how to wrap component with withRest
:
import React from 'react';import PropTypes from 'prop-types'; import Get from 'restful-react';import withRest from 'with-rest'; Component { const data states actions meta = thispropsrandomImageResponse; return <div> statesloading ? 'Loading' : <img = /> <button ="button" =>Show me a !</button> </div> ; } RandomImageComponentPropTypes = randomImageResponse: PropTypesarrayisRequired; const withRandomImage = 'https://dog.ceo/api/breeds/image/random' propName: 'randomImageResponse'; RandomImageComponent
Wrap multiple components using Recompose
import React from 'react';import PropTypes from 'prop-types'; import Get from 'restful-react';import compose from "recompose";import withRest from 'with-rest'; Component ... RandomImageComponentPropTypes = randomResponse: PropTypesarrayisRequired trendingImagesResponse: PropTypesarrayisRequired; const withRandomImage = 'https://dog.ceo/api/breeds/image/random' propName: 'randomImageResponse'; const withTrendingRepos = 'https://github-trending-api.now.sh' propName: 'trendingImagesResponse' withRandomImage withTrendingReposRandomImageComponent;
Rewritten example from: Mutate
import React from 'react';import PropTypes from 'prop-types'; import Get Mutate from 'restful-react';import compose from "recompose";import withRest from 'with-rest'; Component { const movies states actions = thispropsmoviesList; const deleteMovie loading: isDeleting = thispropsmoviesDelete; return <ul> movies <li> moviename <button = => Delete! </button> </li> </ul> } MoviesPropTypes = moviesList: PropTypesarrayisRequired moviesDelete: PropTypesarrayisRequired dispatch: PropTypesfuncisRequired; const withMoviesList = '/movies' propName: 'moviesList'; const withMoviesDelete = '/movies' verb: 'DELETE' propName: 'moviesDelete'; withMoviesList withMoviesDeleteMovies
More examples here: https://github.com/contiamo/restful-react/blob/master/README.md