How to use the react-loads.useLoads 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 / with-typescript / src / index.tsx View on Github external
function App() {
  const getUsers = React.useCallback(async (): Promise => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  }, []);
  const getUsersRecord = useLoads('users', getUsers);
  const users = (getUsersRecord.response || []);

  return (
    
      
        Users
        {getUsersRecord.isPending && }
        {getUsersRecord.isResolved && (
          
            {users.map(user => (
              {user.name}
            ))}
          
        )}
        {getUsersRecord.isRejected && Error! {getUsersRecord.error.message}}
github jxom / react-loads / examples / top-movies / src / MovieList.js View on Github external
export default function MovieList(props) {
  const { onSelectMovie } = props;

  const getMoviesRecord = Loads.useLoads('movies', api.getMovies);
  const movies = getMoviesRecord.response || [];

  return (
    
      Jake's Top Movies
      {getMoviesRecord.isPending && }
      {getMoviesRecord.isResolved && (
        
          {movies.map(movie => (
             onSelectMovie(movie)} />
          ))}
        
      )}
    
  );
}
github jxom / react-loads / examples / render-as-you-fetch / basic / src / MovieList.js View on Github external
export default function MovieList(props) {
  const { loadingMovieId, onSelectMovie } = props;

  const moviesRecord = Loads.useLoads('movies', api.getMovies);
  const movies = moviesRecord.response || [];

  return (
    
      Jake's Top Movies
      
        {movies.map(movie => (
           onSelectMovie(movie)}
          />
        ))}
github jxom / react-loads / examples / basic / src / index.js View on Github external
function App() {
  const getUsers = React.useCallback(async () => {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  }, []);
  const usersRecord = useLoads('users', getUsers);
  const users = usersRecord.response || [];

  return (
    
      
        Users
        {usersRecord.isPending && }
        {usersRecord.isResolved && (
          
            {users.map(user => (
              {user.name}
            ))}
          
        )}
        {usersRecord.isRejected && Error! {usersRecord.error.message}}
github jxom / react-loads / examples / top-movies / src / MovieDetails.js View on Github external
export default function MovieDetails(props) {
  const { movieId, onClickBack } = props;

  const getMovieRecord = Loads.useLoads('movie', api.getMovie, { variables: [movieId] });
  const movie = getMovieRecord.response || {};

  const getReviewsRecord = Loads.useLoads('movieReviews', api.getReviewsByMovieId, { variables: [movieId] });
  const reviews = getReviewsRecord.response || [];

  return (
    
      <button>Back</button>
      <button>
        Reload
      </button>
      {getMovieRecord.isPending &amp;&amp; }
      {getMovieRecord.isResolved &amp;&amp; (
github jxom / react-loads / examples / top-movies / src / MovieDetails.js View on Github external
export default function MovieDetails(props) {
  const { movieId, onClickBack } = props;

  const getMovieRecord = Loads.useLoads('movie', api.getMovie, { variables: [movieId] });
  const movie = getMovieRecord.response || {};

  const getReviewsRecord = Loads.useLoads('movieReviews', api.getReviewsByMovieId, { variables: [movieId] });
  const reviews = getReviewsRecord.response || [];

  return (
    
      <button>Back</button>
      <button>
        Reload
      </button>
      {getMovieRecord.isPending &amp;&amp; }
      {getMovieRecord.isResolved &amp;&amp; (
        
          
            
              {movie.title}

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