How to use the react-loads.createResource function in react-loads

To help you get started, we’ve selected a few react-loads examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github jxom / react-loads / examples / render-as-you-fetch / with-resources / src / resources.js View on Github external
import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});
github jxom / react-loads / examples / render-as-you-fetch / with-resources / src / resources.js View on Github external
import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});
github jxom / react-loads / examples / render-as-you-fetch / with-resources / src / resources.js View on Github external
import * as Loads from 'react-loads';
import * as api from './api';

export const moviesResource = Loads.createResource({
  context: 'movies',
  fn: api.getMovies
});

export const movieResource = Loads.createResource({
  context: 'movie',
  fn: api.getMovie
});

export const movieReviewsResource = Loads.createResource({
  context: 'movieReviews',
  fn: api.getReviewsByMovieId
});
github jxom / react-loads / examples / with-resources / src / index.js View on Github external
const currentUsers = meta.cachedRecord.response;
    const newUser = response.data.data;
    return [...currentUsers, newUser];
  };
}

function deleteUser(user) {
  return async meta => {
    await axios.delete(`https://jsonplaceholder.typicode.com/users/${user.id}`);
    const currentUsers = meta.cachedRecord.response;
    const newUsers = currentUsers.filter(_user => _user.id !== user.id);
    return newUsers;
  };
}

export const usersResource = Loads.createResource({
  context: 'users',
  fn: getUsers,
  add: addUser,
  delete: deleteUser
});

function App() {
  const [name, setName] = React.useState();
  const [deletingUserId, setDeletingUserId] = React.useState();

  const getUsersRecord = usersResource.useLoads();
  const users = getUsersRecord.response;

  const addUserRecord = usersResource.add.useDeferredLoads();

  const deleteUserRecord = usersResource.delete.useDeferredLoads();

react-loads

A simple React component to handle loading state

MIT
Latest version published 3 years ago

Package Health Score

48 / 100
Full package analysis