Getting Started

OverviewInstallation

Contributing

Steps

#useAsync

Make things asynchronously and keep your layout interactive.



#Usage


#Example 1

import { useAsync } from '@hitechline/reactools';
import { Fragment } from 'react';

const Component = () => {
  const { data, loading } = useAsync(async () => {
    const array = [1, 2];
    const newArray = await Promise.all(array.map(val => val + 1));

    return newArray;
  });

  if (loading) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      {data.map(val => (
        <Fragment key={val}>{val}</Fragment>
      ))}
    </div>
  );
};


#Example 2

import { useAsync } from '@hitechline/reactools';
import api from 'services/api';

const Component = () => {
  const { loading, error, data: posts } = useAsync(async () => {
    const { data } = await api.get('posts');

    return data;
  });

  if (loading) {
    return <h1>Loading...</h1>;
  }

  if (error) {
    return <h1>An error has occurred</h1>;
  }

  return (
    <div>
      {posts.map(({ id, title }) => (
        <h1 key={id}>{title}</h1>
      ))}
    </div>
  );
};


#Cancelling Operation

This hook allows the operation to be canceled, despite some limitations


  1. Promise does not have this behavios by default.
  2. The developer will need to know how to deal with the best way in which his contexts fits.

#Basic Example

import { useAsync } from '@hitechline/reactools';
import { useEffect } from 'react';
import api from 'services/api';

const Component = () => {
  const { loading, cancel } = useAsync(async () => {
    const { data } = await api.get('posts');

    return data;
  });

  useEffect(() => {
    if (!loading) {
      return;
    }

    const timeoutId = setTimeout(() => {
      cancel();
    }, 5000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [loading, cancel]);

  if (loading) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      {posts.map(({ id, title }) => (
        <h1 key={id}>{title}</h1>
      ))}
    </div>
  );
};


#Advanced Example (Hard Usage)

import { useAsync } from '@hitechline/reactools';
import { useEffect } from 'react';
import axios from 'axios';
import api from 'services/api';

const Component = () => {
  const { loading, cancel } = useAsync(async ({ signal }) => {
    const cancelToken = axios.CancelToken.source();

    signal.on(() => {
      cancelToken.cancel();
    });

    const { data } = await api.get('posts', {
      cancelToken: cancelToken.token,
    });

    return data;
  });

  useEffect(() => {
    if (!loading) {
      return;
    }

    const timeoutId = setTimeout(() => {
      cancel();
    }, 5000);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [loading, cancel]);

  if (loading) {
    return <h1>Loading...</h1>;
  }

  return (
    <div>
      {posts.map(({ id, title }) => (
        <h1 key={id}>{title}</h1>
      ))}
    </div>
  );
};