open-index/open-npm huggingface dataset:
npm package: @neat-tech/type-utils
Description: ## Installation
Author: Vadim Majsuk
Latest version: 1.0.0

# Type Utils

## Installation

```bash
yarn add @neat-tech/type-utils
```

## Usage

### Nested path

```
interface Example {
  some: {
    nested: {
      array: string[]
    }
    field: number
  }
}

type Keys = Path8<Example>
/**
  'some' | 'some.nested' | 'some.nested.array' | 'some.nested.array.0'
  | 'some.field'
*/

type Value = Get8<Example, 'some.nested.array.0'> // string

```
npm package: @neat-tech/use
Description: ```bash yarn add @neat-tech/use ```
Author: Vadim Majsuk
Latest version: 1.0.1

## Installation

```bash
yarn add @neat-tech/use
```

## Hooks

### useAsyncAction

```tsx
const App = () => {
  const [run, { loading, error, result }] = useAsyncAction(createPost);

  if (loading) return <div>loading...</div>;
  if (error) return <div>{error}</div>;
  if (result) return <div>{JSON.stringify(result)}</div>;

  return <div onClick={() => run({ text: 'abc' })}>create post</div>;
};
```

### useHover

```tsx
const App = () => {
  const { hovered, hoverProps } = useHover();

  return (
    <div
      style={{ background: 'pink', width: 100, height: 100 }}
      {...hoverProps}
    >
      {hovered ? 'hovered' : 'hover me'}
    </div>
  );
};
```

### useFocus

```tsx
const App = () => {
  const { focused, focusProps } = useFocus();

  return (
    <button
      style={{ background: 'pink', width: 100, height: 100 }}
      {...focusProps}
    >
      {focused ? 'focused' : 'focus me'}
    </button>
  );
};
```

### useLoadingDebounced

```tsx
const App = () => {
  const instantTask = async () => 10;
  const [run, { loading, error, result }] = useAsyncAction(instantTask);
  const loadingDebounced = useLoadingDebounced(loading);

  return (
    <div onClick={run}>
      {loading && 'loading'}
      {loadingDebounced && 'loadingDebounced'}
    </div>
  );
};
```