lxsmnsyc / re-use Goto Github PK

View Code? Open in Web Editor NEW

27.0 4.0 1.0 168 KB

⚛️ 🎣 A collection of hooks for ReasonReact

License: MIT License

JavaScript 27.84% C++ 2.14% Reason 70.01%

reasonml reason-react react-hooks

re-use's Introduction

@lxsmnsyc/re-use

⚛️ 🎣 A collection of hooks for ReasonReact

Install

npm install --save @lxsmnsyc/re-use

yarn add @lxsmnsyc/re-use

bsconfig.json

  "bs-dependencies": [
    "@lxsmnsyc/re-use"
  ],

Hooks

Constant
ConstantCallback
ForceUpdate
IsomorphicEffect
LifeCycle
MountedState
Mutable
NativeCallback
NativeEffect
NativeIsomorphicEffect
NativeLayoutEffect
NativeMemo
NativeState
NativeSyncEffect
OnMount
OnUnmount
PageVisibility
Previous
Promise
RefMounted
SyncEffect
ThrottledReducer
ThrottledState
UpdateEffect
WindowSize

License

MIT © lxsmnsyc

re-use's People

Contributors

Stargazers

Watchers

Forkers

idkjs

re-use's Issues

[Feature] useMountedState

Wrapper for useRefMounted which returns a function instead of a mutable reference, preventing users on overriding the reference's value.

let call: unit => (unit => bool);

add useConstantCallback

since useCallback works like useMemo, leverage useConstant to produce constant callbacks.

let call: ('input => 'output) => ('input => 'output);

[Feature] useWindowSize

useWindowSize provides the window's current width and height and reacts to its value changes.

useWindowSize returns a record with fields width and height.

type t = {
  width: int,
  height: int,
};

let call: unit => t;

add useEffectOnce

an effect that is only executed on once.

let call: (unit => option(unit => unit)) => unit;

remove default param for useConstant through bindings

By rewriting useConstant to a JS file and into a binding, it allows us to remove the default param.

add useConstant

from the React website (https://reactjs.org/docs/hooks-faq.html#how-to-create-expensive-objects-lazily):

useMemo lets you memoize an expensive calculation if the dependencies are the same. However, it only serves as a hint, and doesn’t guarantee the computation won’t re-run. But sometimes you need to be sure an object is only created once.

// Constant.re
let call: unit => 'a => 'a;

Usage:

let myValue = ReUse.Constant.call(() => 100);

[Feature] useThrottledCallback

Hook for wrapping a given callback into a throttled callback.

let call: ('input => 'output) => int => ('input => 'output);
let call1: ('input => 'output) => array('a) => ('input => 'output);
let call2: (('input => 'output), int, ('a, 'b)) => ('input => 'output);
let call3: (('input => 'output), int, ('a, 'b, 'c)) => ('input => 'output);
let call4: (('input => 'output), int, ('a, 'b, 'c, 'd)) => ('input => 'output);
let call5: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e)) => ('input => 'output);
let call6: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e, 'f)) => ('input => 'output);
let call7: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => ('input => 'output);

ThrottledState should receive a state supplier, not the state value itself.

To follow the useState usage convention, ThrottledState must receive a state supplier when called.

let call: int => (unit => 'a) => ('a, ('a => 'a) => unit);

[Feature] usePromise

Creates a promise wrapper function which resolves only if the component is still mounted (depending on the given dependencies).

let call: unit => (Js.Promise.t('a) => Js.Promise.t('a));
let call0: unit => (Js.Promise.t('a) => Js.Promise.t('a));
let call1: array('a) => (Js.Promise.t('r) => Js.Promise.t('r));
let call2: ('a, 'b) => (Js.Promise.t('r) => Js.Promise.t('r));
let call3: ('a, 'b, 'c) => (Js.Promise.t('r) => Js.Promise.t('r));
let call4: ('a, 'b, 'c, 'd) => (Js.Promise.t('r) => Js.Promise.t('r));
let call5: ('a, 'b, 'c, 'd, 'e) => (Js.Promise.t('r) => Js.Promise.t('r));
let call6: ('a, 'b, 'c, 'd, 'e, 'f) => (Js.Promise.t('r) => Js.Promise.t('r));
let call7: ('a, 'b, 'c, 'd, 'e, 'f, 'g) => (Js.Promise.t('r) => Js.Promise.t('r));

[Bug] useIsomorphicEffect should be constant.

useIsomorphicEffect is currently written to check if window is undefined everytime it is called. It will be buggy if window value changed dynamically, altering the used hook for useIsomorphicEffect, and could lead into unexpected behavior such as disparity between state indeces for the hooks, cleanup function not being called, etc.

[Feature] useNativeLayoutEffect

A variation of useLayoutEffect which accepts a single value as a dependency and performs the built-in equality comparison by ReasonML.

let call: (unit => option(unit => unit)) => 'a => unit;

add useIsomorphicEffect

SSR does not support useLayoutEffect (as the DOM does not exist yet when the page is being delivered.). useIsomorphicLayout solves the issue by providing useLayoutEffect whenever the DOM becomes available, fallbacks to useEffect if it isn't.

let call: (unit => option(unit => unit)) => unit;
let call1: (unit => option(unit => unit)) => array('a) => unit;
let call2: (unit => option(unit => unit)) => ('a, 'b) => unit;
let call3: (unit => option(unit => unit)) => ('a, 'b, 'c) => unit;
let call4: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd) => unit;
let call5: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e) => unit;
let call6: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e, 'f) => unit;
let call7: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e, 'f, 'g) => unit;

Usage:

ReUse.IsomorphicEffect.call(() => {
  // some logic 
});

[Feature] useNativeEffect

A variation of useEffect which accepts a single value as a dependency and performs the built-in equality comparison by ReasonML.

let call: (unit => option(unit => unit)) => 'a => unit;

[Feature] useDebouncedReducer

A hook for producing a debounced useReducer.

let call: ('state => 'action => 'state) => int => 'state => ('state, 'action => unit);

add useForceUpdate

A hook that returns a function that re-renders the component when called.

let call: unit => unit => unit;

Usage

let forceUpdate = ReUse.ForceUpdate.call();

forceUpdate(); // re-renders the component.

separate js artifacts from source

[Feature] useNativeMemo

A variant of the useMemo that accepts a single dependency value and is compared through ReasonML's equality comparison.

let call: (unit => 'a) => 'b => 'a;

add useOnMount and useOnUnmount (lifecycle hooks)

add lifecycle hooks

// OnMount.re
let call: (unit => unit) => unit;

// OnUnmount.re
let call: (unit => unit) => unit;

add useUpdateEffect

an effect that only executes if the component updates. Leverages IsomorphicEffect.

let call: (unit => option(unit => unit)) => unit;
let call1: (unit => option(unit => unit)) => array('a) => unit;
let call2: (unit => option(unit => unit)) => ('a, 'b) => unit;
let call3: (unit => option(unit => unit)) => ('a, 'b, 'c) => unit;
let call4: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd) => unit;
let call5: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e) => unit;
let call6: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e, 'f) => unit;
let call7: (unit => option(unit => unit)) => ('a, 'b, 'c, 'd, 'e, 'f, 'g) => unit;

[Feature] useNativeIsomorphicEffect

A variation of useEffect which accepts a single value as a dependency and performs the built-in equality comparison by ReasonML.

let call: (unit => option(unit => unit)) => 'a => unit;

[Feature] useDebouncedCallback

Hook for wrapping a given callback into a debounced callback.

let call: ('input => 'output) => int => ('input => 'output);
let call1: ('input => 'output) => array('a) => ('input => 'output);
let call2: (('input => 'output), int, ('a, 'b)) => ('input => 'output);
let call3: (('input => 'output), int, ('a, 'b, 'c)) => ('input => 'output);
let call4: (('input => 'output), int, ('a, 'b, 'c, 'd)) => ('input => 'output);
let call5: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e)) => ('input => 'output);
let call6: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e, 'f)) => ('input => 'output);
let call7: (('input => 'output), int, ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => ('input => 'output);

[Feature] useThrottledReducer

A hook for producing a throttled useReducer.

let call: ('state => 'action => 'state) => int => 'state => ('state, 'action => unit);

[Feature] useNativeState

a variation of useState but instead of using the default Object.is function to bail out of re-render, it uses the ReasonML's equality comparison.

let call: (unit => 'a) => ('a, ('a => 'a) => unit);

[Feature] usePageVisibility

usePageVisibility uses the document.visibilityState property and visibilitychange event to keep track of the page visibility's state. This is useful for pausing background processes like animation when the page goes hidden.

This hook provides a boolean value that represents the page visibility state: true if it is visibile, false otherwise.

// PageVisibility
let call: unit => bool;

[Feature] useNativeSyncEffect

A variation of useSyncEffect that receives a single dependency value and is compared using the ReasonML's equality comparison

let call: (unit => option(unit => unit)) => 'a => unit;

add usePrevious

a hook that holds the state of a value before re-renders.

let call: 'a => option('a);

add useRefMounted

leverages useMutable to track lifecycle changes.

let call: unit => ref(bool);

[Feature] useThrottledState

A hook that allows to throttle setState with a given timeout. Same syntax as a useState but accepts a timeout first.

let call: int => 'a => ('a, 'a => 'a => unit);

[Feature] useNativeCallback

A variant of the useCallback that accepts a single dependency value and is compared through ReasonML's equality comparison.

let call: ('input => 'output) => 'a => ('input => 'output);

[Feature] useSyncEffect

Runs a blocking side-effect synchronously on render.

let call: (unit => option(unit => unit)) => unit;
let call0: (unit => option(unit => unit)) => unit;
let call1: (unit => option(unit => unit)) => array('a) => unit;
let call2: ((unit => option(unit => unit)), ('a, 'b)) => unit;
let call3: ((unit => option(unit => unit)), ('a, 'b, 'c)) => unit;
let call4: ((unit => option(unit => unit)), ('a, 'b, 'c, 'd)) => unit;
let call5: ((unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e)) => unit;
let call6: ((unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e, 'f)) => unit;
let call7: ((unit => option(unit => unit)), ('a, 'b, 'c, 'd, 'e, 'f, 'g)) => unit;

[Feature] useRenderCount

A hook that tracks the number of times a component has re-rendered.

let call: unit => int;

add useMutable

Leverage the mutable/ref('a) feature of Reason, an optional replacement for React's useRef (but not for passing it to ref property).

// Mutable
let call: 'a => ref('a);

Usage:

let myRef = ReUse.Mutable.call(0);

Js.log(myRef^); // 0

[Feature] useDebouncedState

A hook that allows to debounce setState with a given timeout. Same syntax as a useState but accepts a timeout first.

let call: int => 'a => ('a, 'a => 'a => unit);

Fix all dependencies for hooks that requires dependencies

use **Effect0 for side-effects that runs once.
add variation for **Effect0

WindowSize component has typing error

Describe the bug
The WindowSize component hat an error.
addEventListener(window, "resive", handler);
Is required to change to:
addEventListener(window, "resize", handler);

add useLayoutEffectOnce and useIsomorphicEffectOnce

variants of useEffectOnce, can also be used for lifecycle hooks.

// LayoutEffectOnce
let call: (unit => option(unit => unit)) => unit;

// IsomorphicEffectOnce
let call: (unit => option(unit => unit)) => unit;

lxsmnsyc / re-use Goto Github PK

re-use's Introduction

@lxsmnsyc/re-use

Install

bsconfig.json

Hooks

License

re-use's People

Contributors

Stargazers

Watchers

Forkers

re-use's Issues

Recommend Projects

Recommend Topics

Recommend Org