@iluhander/uwu-react

Iluhander React lib

Custom react lib, mainly focused on making requests. It provides facilities for creating:

• blazingly fast hooks for making requests (with timeouts, attempts, reducers and more)
• convinient forms (with auto saving, data injecting and more)
• controlling app state (using enums and checking functions)
• and more

Guides

useReq

useReq allows you to control your requests. You can provide a fetchFunction and a config object, containing the following fields:

• StatusObj: your custom status enum. By default, ReqStatus is used
• getSuccessStatus: function, receiving the data field from fetchFunction result and returning a new status
• getFailedStatus: function, receiving status code of a failed fetchFunction and returning a new status
• notInstantReq: flag, telling should the fetchFunction be called only after calling exec
• initialData: initial data, stored in hook
• initialStatus: initial status. If set to StatusObj.INITIALIZED, request isn't being executed untill the exec() call.
• reducer: function, receiving old data and new fetchFunction data, and returning the new data
• timeout: timeout in ms for fetchFunction. After the time runs out, status sets to StatusObj.TIMEOUT
• attempts: amount of times useReq should try to call fetchFunction, ignoring it's error

useReq will return an object, containing the following fields:

• data: data, fetched by the fetchFunction
• status: status (field of StatusObj)
• exec: function for starting a new request
• setData: function, allowing to directly change the data in useReq (without making a request)

For example, here's how to create custom hook for patching data with axios:

const usePatchSomeData = () =>
  useReq((newData) => axios.patch('/your_endpoint', newData), {
    notInstantReq: true,
    getFailedStatus: (code) => {
      if (code === 409) {
        return YourStatusObj.CONFLICT;
      }

      return YourStatusObj.INTERNAL_ERR;
    },
    attempts: 3
  });

And here is how to use it in a react component

const { data, status, exec } = usePatchSomeData();

const handleSomeEvent = (eventData) => {
  exec(eventData);
}

useSendFormByCD

useSendFormByCD automatically sends your form data, when it's updated.

You can provide a fetchFunction, your form ref and a config object, containing the following fields:

• beforeSending: function, which modifies the form data before it gets sent
• compare: function, comparing previous and new form data. By default, areEqualShallow is used
• coolDown: how often (in ms) the hook should check the form data
• name: localStorage key. If you set it, the hook will automatically save data in local storage in between of calling the fetchFunction
• localSavingCoolDown: how often the hook should save the form data locally

Here is how you can use it:

const usePatchPostData = (formRef) =>
  useSendFormByCD((newData) => axios.patch('your_endpoint', newData), formRef, {
    name: `locallySavingKey`,
    localSavingCoolDown: 1500
  });

Please notice: the docs are currently in development. You can find more information in jsdocs.