@modern-kit/react
Version:
1 lines • 2.9 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../src/hooks/useControllableState/index.ts"],"sourcesContent":["import { SetStateAction, useCallback, useState } from 'react';\n\ninterface UseControllableStateOptions<T> {\n value?: T | undefined;\n defaultValue: T;\n}\n/**\n * @description 제어된 상태와 비제어된 상태를 관리하는 훅입니다.\n *\n * value가 제공되면 제어 상태(controlled mode)로 처리되며, 제공되지 않으면 비제어 상태(uncontrolled mode)로 처리됩니다.\n *\n * controlled mode에서는 value는 외부에서 제어되며,\n * 해당 훅이 반환하는 setValue 함수를 통해 value를 변경할 수 없습니다.\n *\n * uncontrolled mode에서는 defaultValue가 초기값으로 사용되며,\n * 해당 훅이 반환하는 setValue 함수를 통해 value를 변경할 수 있습니다.\n *\n * @template T - 상태의 타입입니다.\n * @param {T} params.value - 제어된 상태의 값입니다.\n * @param {T} params.defaultValue - 비제어된 상태의 초기값입니다.\n * @returns {UseControllableStateReturn<T>} value와 setValue 함수를 반환합니다.\n *\n * @example\n * const [outerValue, setOuterValue] = useState(1);\n * const [value, setValue] = useControllableState({ value: outerValue, defaultValue: 0 });\n *\n * value; // 1\n *\n * setValue(2); // controlled mode에서는 value가 외부에서 제어되기 때문에 변경되지 않음\n * value; // 1\n *\n * setOuterValue(3); // 외부 value 변경\n * value; // 3\n *\n * @example\n * const [value, setValue] = useControllableState({ defaultValue: 0 });\n *\n * // or\n * // const [value, setValue] = useControllableState({\n * // value: undefined,\n * // defaultValue: 0\n * // });\n *\n * value; // 0\n *\n * setValue(1); // uncontrolled mode에서는 setValue로 value 변경\n * value; // 1\n */\nexport function useControllableState<T>({\n value,\n defaultValue,\n}: UseControllableStateOptions<T>): [\n T,\n (nextValue: SetStateAction<T>) => void\n] {\n const [uncontrolledValue, setUncontrolledValue] = useState<T>(defaultValue);\n const isControlled = value !== undefined;\n const currentValue = isControlled ? value : uncontrolledValue;\n\n const setValue = useCallback(\n (nextValue: SetStateAction<T>) => {\n if (!isControlled) {\n setUncontrolledValue(nextValue);\n }\n },\n [isControlled]\n );\n\n return [currentValue, setValue];\n}\n"],"names":[],"mappings":";;AAgDO,SAAS,oBAAA,CAAwB;AAAA,EACtC,KAAA;AAAA,EACA;AACF,CAAA,EAGE;AACA,EAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAY,YAAY,CAAA;AAC1E,EAAA,MAAM,eAAe,KAAA,KAAU,MAAA;AAC/B,EAAA,MAAM,YAAA,GAAe,eAAe,KAAA,GAAQ,iBAAA;AAE5C,EAAA,MAAM,QAAA,GAAW,WAAA;AAAA,IACf,CAAC,SAAA,KAAiC;AAChC,MAAA,IAAI,CAAC,YAAA,EAAc;AACjB,QAAA,oBAAA,CAAqB,SAAS,CAAA;AAAA,MAChC;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,OAAO,CAAC,cAAc,QAAQ,CAAA;AAChC;;;;"}