@spaced-out/ui-design-system/lib/hooks/useInputState/useInputState.js.flow

Sense UI components library

// @flow strict

import * as React from 'react';


type ReturnType = [
  string,
  (event: SyntheticInputEvent<HTMLInputElement>) => void,
];

/**
 * Simple Hook to use with input tag. The primary purpose is an abstraction over input onChange property.
 * () => {
 *   const [value, onChange] = useInputState("");
 *
 *   return <Input type="text" value={value} onChange={onChange} />;
 * }
 */
export const useInputState = (initialState: string = ''): ReturnType => {
  const [state, setState] = React.useState(initialState);

  const setInputState = React.useCallback(
    (event) => setState(event && event.target.value),
    [],
  );

  return [state, setInputState];
};