@appello/common v2.0.16

Common frontend library of components for web and mobile environmental

How to use it

Download package from npm:

npm i @appello/common

Import modules you need in your code:

import { useInterval, isNill } from '@appello/common';

Development guide

For developers

Each new functionality must be added to the folder and exported from the root! This is necessary in order to simplify the import of the necessary functionality:

import { useInterval, isFunction, ... } from '@appello/common';

If you need to create new module, do not forget to add index.ts with exports.

Hooks

useCodeTimer

import { useCodeTimer } from '@appello/common';

Ready-made hook for setting a timer when sending SMS again

API:

import { useCodeTimer } from "@appello/common";

const { seconds, isStart, sendCode } = useCodeTimer();

const Component = () => {
  return (
    <div>
      ...
      {
        isStart && (
          <span>{seconds}</span>
        )
      }
      <button type="button" onClick={sendCode} />
      ...
    </div>
  );
};

Params

Return

useCombinedRef

import { useCombinedRef } from '@appello/common';

Hook for combining refs.

API:

import { useCombinedRef } from '@appello/common';

const Component = () => {
  const firstRef = useRef<number>(0);
  const secondRef = useRef<number>(0);
  const combinedRef = useCombinedRef(firstRef, secondRef);

  combinedRef(5);
}

Params

Return

useDebounceCallback

import { useDebounceCallback } from '@appello/common';

A hook that deal with the debounced function.

API:

import { useDebounceCallback } from '@appello/common';

const Component = () => {
  const [value, setValue] = useState(0);
  const { debounce } = useDebounceCallback(
    () => {
      setValue(value + 1);
    },
  );

  return (
    <button type="button" onClick={debounce}>
      Click
    </button>
  );
};

Params

DebounceOptions:

export interface DebounceOptions {
  wait?: number;
  leading?: boolean;
  trailing?: boolean;
  maxWait?: number;
}

Return

useDebounceEffect

import { useDebounceEffect } from '@appello/common';

A effect with debounce

API:

import { useDebounceEffect } from '@appello/common';

const Component = () => {
  const [value, setValue] = useState('hello');
  const [records, setRecords] = useState<string[]>([]);

  useDebounceEffect(
    () => {
      setRecords((val) => [...val, value]);
    },
    [value],
  );

  return (
    <>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Write text"
      />
      <ul>
        {records.map((record, index) => (
          <li key={index}>{record}</li>
        ))}
      </ul>
    </>
  );
};

Params

DebounceOptions:

export interface DebounceOptions {
  wait?: number;
  leading?: boolean;
  trailing?: boolean;
  maxWait?: number;
}

useFirstMountState

import { useFirstMountState } from '@appello/common';

A hook that returns the first rendering

API:

import { useFirstMountState } from '@appello/common';

const Component = () => {
  const isFirstMount = useFirstMountState();
  return console.log(isFirstMount)
};

Return

useInterval

import { useInterval } from '@appello/common';

A hook that allows you to call a callback function in a time interval

API:

import { useInterval } from '@appello/common';

const Component = () => {
  const { start } = useInterval({
    fn: () => {
      console.log('Privet')
    },
  });

  return (
    <button type="button" onClick={start}>
      Start timer
    </button>
  )
};

Params

Return

useLatest

import { useLatest } from '@appello/common';

A Hook that returns the latest value, effectively avoiding the closure problem.

API:

import { useLatest } from "@appello/common";

const Component = () => {
  const [count, setCount] = useState(0);
  const latestCountRef = useLatest(count);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(latestCountRef.current + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <p>count: {count}</p>
    </>
  );
};

Params

Return

useManualUpdate

import { useManualUpdate } from '@appello/common';

A hook that can be used to manually update a component.

API:

import { useManualUpdate } from '@appello/common';

const Component = () => {
  const update = useManualUpdate();

  return (
    <>
      <div>Time: {Date.now()}</div>
      <button type="button" onClick={update}>
        Update
      </button>
    </>
  );
};

Return

useMemoCallback

import { useMemoCallback } from '@appello/common';

Hooks for persistent functions. In theory, useMemoizedFn can be used instead of useCallback.

In some scenarios, we need to use useCallback to cache a function, but when the second parameter deps changes, the function will be regenerated, causing the function reference to change.

API:

import { useMemoCallback } from '@appello/common';

const Component = () => {
  const [count, setCount] = useState(0);

  const memoCallback = useMemoCallback(() => {
    message.info(`Current count is ${count}`);
  });

  return (
    <>
      <p>count: {count}</p>
      <button
        type="button"
        onClick={() => setCount((v) => v + 1)}
      >
        Add Count
      </button>
      <button type="button" onClick={memoCallback}>
        Call
      </button>
    </>
  );
};

Params

Return

useMountEffect

import { useMountEffect } from '@appello/common';

A hook that executes a function after the component is mounted.

API:

import { useMountEffect } from '@appello/common';

const Component = () => {
  useMountEffect(() => {
    console.log("Mount")
  })

  return (
    <span>component</span>
  );
};

Params

usePrevious

import { usePrevious } from '@appello/common';

A Hook to return the previous state.

API:

import { usePrevious } from '@appello/common';

const Component = () => {
  const [count, setCount] = useState(0);
  const previous = usePrevious(count);
  
  return (
    <>
      <div>counter current value: {count}</div>
      <div>counter previous value: {previous}</div>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        increase
      </button>
      <button type="button" onClick={() => setCount((c) => c - 1)}>
        decrease
      </button>
    </>
  );
};

Params

Return

useQueryParamsBuilder

import { useQueryParamsBuilder } from '@appello/common';

A Hook for manager query params with debounce time

API:

import { useQueryParamsBuilder } from '@appello/common';

const Component = () => {
  const [getService, { data }] = useAnyRequest();

  const { updateQueryParams } = useQueryParamsBuilder({
    queryCb: params => getService(params),
    defaultParams: {
      categoryId,
      search: '',
    },
  });
  
  return (
    <></>
  );
};

Params

Return

useSelectOptions

import { useSelectOptions } from '@appello/common';

Converts dictionaries for picker to structure:

[
  {
    value: 1,
    label: 'Select 1'
  }, {
    value: 2,
    label: 'Select 2'
  }
]

API:

import { useSelectOptions } from '@appello/common';

const Component = () => {
  const convertedOptions = useSelectOptions([
    {
      val: 1,
      text: 'Select 1',
    },
    {
      val: 2,
      text: 'Select 2',
    },
  ], {
    label: 'text',
    value: 'val',
  })

  return (
    <span>{JSON.stringify(convertedOptions)}</span>
  );
};

Params

Return

useStateObject

import { useStateObject } from '@appello/common';

Hook with state for working with objects:

API:

import { useStateObject } from "@appello/common";
import { setState } from "jest-circus";

const Component = () => {
  const [state, setState] = useStateObject({
    name: "Test",
    lastName: "Jest",
    age: 21
  });

  return (
    <>
      <span>{JSON.stringify(state)}</span>
      <button
        type="button"
        onClick={() => {
          setState(prev => ({
            age: prev.age + 25
          }));
        }}
      >
        Update using callback
      </button>
      <button
        type="button"
        onClick={() => {
          setState({
            name: "New",
            lastName: "Test"
          });
        }}
      >
        Update using object
      </button>
    </>
  );
};

Params

Return

useSwitchValue

import { useSwitchValue } from '@appello/common';

A hook that toggle states.

API:

import { useSwitchValue } from "@appello/common";

const Component = () => {
  const { value, on, off, toggle } = useSwitchValue(false);

  return (
    <>
      <p>{`${value}`}</p>
      <p>
        <button type="button" onClick={on}>
          On
        </button>
        <button type="button" onClick={off} style={{ margin: "0 8px" }}>
          Off
        </button>
        <button type="button" onClick={toggle}>
          Toggle
        </button>
      </p>
    </>
  );
};

Params

Return

useUnmountEffect

import { useUnmountEffect } from '@appello/common';

A hook that executes the function right before the component is unmounted.

API:

import { useUnmountEffect } from "@appello/common";

const Component = () => {
  useUnmountEffect(() => {
    console.log('Unmount');
  });

  return <p>Hello World!</p>;
};

Params

useUpdateEffect

import { useUpdateEffect } from '@appello/common';

A hook alike useEffect but skips running the effect for the first time.

API:

import { useUpdateEffect } from "@appello/common";

const Component = () => {
  const [count, setCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);

  useUpdateEffect(() => {
    setUpdateEffectCount((c) => c + 1);
  }, [count]);

  return (
    <div>
      <p>updateEffectCount: {updateEffectCount}</p>
      <button type="button" onClick={() => setCount((c) => c + 1)}>
        reRender
      </button>
    </div>
  );
};

Params

useFormPersist

import { useFormPersist } from '@appello/common';

A hook for save temporary data from React hook form inside storage (LocalStorage / SessionStorage / AsyncStorage).

API:

import { useFormPersist } from "@appello/common";
import { Controller } from 'react-hook-form';
import AsyncStorage from '@react-native-async-storage/async-storage';

type FormType = {
  name: string;
  email: string;
}

const Component = () => {
  const [count, setCount] = useState(0);
  const [updateEffectCount, setUpdateEffectCount] = useState(0);

  const { syncFromStorage, syncToStorage } = useFormPersist<FormType>({
    key: 'StorageKey',
    storage: AsyncStorage,
  });

  const {
    control,
    submit,
    watch,
    formState: { defaultValues },
  } = useForm<ProfileAccountSchemaType>({
    schema: ProfileAccountSchema,
    defaultValues: () => {
      // Sync data form storage (you can select sync-policy)
      return syncFromStorage({
        defaultValues: {
          name: '',
          email: ''
        },
      });
    },
  })

  // Sync to storage
  syncToStorage(watch());

  return (
    <div>
      <Controller
        control={control}
        name="name"
        render={({ field: { value, onChange } }) => (
          <input
            type="text"
            value={value}
            onChange={onChange}
          />
        )}
      />
    </div>
  );
};

Params

Return