open-index/open-npm huggingface dataset:
npm package: @kopexa/tiptap
Description: our tiptap components
Author: Kopexa
Latest version: 17.12.7

# @kopexa/tiptap

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.

- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Installation

```sh
yarn add @kopexa/tiptap
# or
npm i @kopexa/tiptap
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/toolbar
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.2.40

# @kopexa/toolbar

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.

- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Installation

```sh
yarn add @kopexa/toolbar
# or
npm i @kopexa/toolbar
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/tooltip
Description: Floating element that provides a control with contextual information via pointer or focus.
Author: Kopexa
Latest version: 17.2.40

# @kopexa/tooltip

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.

- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Installation

```sh
yarn add @kopexa/tooltip
# or
npm i @kopexa/tooltip
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-callback-ref
Description: A React hook for always referencing the latest callback.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-callback-ref

A React hook for always referencing the latest callback.

---

## Overview

`@kopexa/use-callback-ref` is a utility hook for React that ensures your callback always points to the latest function instance, even across re-renders. This is especially useful for event handlers, effects, and subscriptions where you want to avoid stale closures.

- **Author:** Kopexa (<https://kopexa.com>)
- **License:** MIT
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Features

- Guarantees the latest callback reference
- Prevents unnecessary re-renders
- TypeScript support
- Lightweight and dependency-free (except React)

## Installation

```sh
pnpm add @kopexa/use-callback-ref
# or
yarn add @kopexa/use-callback-ref
# or
npm install @kopexa/use-callback-ref
```

## Usage

```tsx
import { useCallbackRef } from '@kopexa/use-callback-ref';

function MyComponent() {
  const handleClick = useCallbackRef(() => {
    // Always the latest logic here
  });

  React.useEffect(() => {
    window.addEventListener('click', handleClick);
    return () => window.removeEventListener('click', handleClick);
  }, [handleClick]);

  return <button onClick={handleClick}>Click me</button>;
}
```

## API

### `useCallbackRef<T extends (...args: any[]) => any>(callback: T): T`

- **callback**: The function you want to always reference the latest version of.
- **Returns**: A stable function reference that always calls the latest callback.

#### Example

```tsx
const stableCallback = useCallbackRef((event) => {
  // ...
});
```

## Best Practices

- Use for event handlers, effects, and subscriptions.
- Avoid using for values that do not change or do not need to be stable.

## Why Kopexa?

Kopexa (<https://kopexa.com>) is dedicated to building reliable, developer-friendly open source tools. This package is designed with clarity, stability, and best practices in mind, inspired by the Google API Design Guide.

## License

MIT © Kopexa
npm package: @kopexa/use-composed-ref
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-composed-ref

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-composed-ref
# or
npm i @kopexa/use-composed-ref
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-controllable-state
Description: A hook to provide a controllable state
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-controllable-state

A React hook for building controlled and uncontrolled components, designed for clarity and reliability in the style of the Google API Design Guide.

---

## Overview

`@kopexa/use-controllable-state` provides a robust pattern for managing state in React components that can be either controlled (via props) or uncontrolled (internal state). This hook is ideal for reusable UI components and libraries.

- **Author:** Kopexa (<https://kopexa.com>)
- **License:** MIT
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Features

- Supports both controlled and uncontrolled usage
- Customizable change detection with `shouldUpdate`
- TypeScript support
- Lightweight and dependency-free (except React)

## Installation

```sh
pnpm add @kopexa/use-controllable-state
# or
yarn add @kopexa/use-controllable-state
# or
npm install @kopexa/use-controllable-state
```

## Usage

```tsx
import { useControllableState } from '@kopexa/use-controllable-state';

function MyComponent(props) {
  const [value, setValue] = useControllableState({
    value: props.value,
    defaultValue: 0,
    onChange: props.onChange,
  });

  return <input value={value} onChange={e => setValue(e.target.value)} />;
}
```

## API

### `useControllableState<T>(props: UseControllableStateProps<T>): [T, Dispatch<SetStateAction<T>>]`

- **props**: See below for details.
- **Returns**: `[value, setValue]` — the current value and a setter function.

#### `UseControllableStateProps<T>`
- `value?`: Controlled value
- `defaultValue?`: Initial value for uncontrolled usage
- `onChange?`: Callback when value changes
- `shouldUpdate?`: Custom comparison function

## Best Practices

- Use for components that can be both controlled and uncontrolled.
- Provide clear documentation for consumers of your component.

## Why Kopexa?

Kopexa (<https://kopexa.com>) builds reliable, developer-friendly open source tools. This package is designed for clarity, stability, and best practices, inspired by the Google API Design Guide.

## License

MIT © Kopexa
npm package: @kopexa/use-debounced-callback
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-debounced-callback

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-debounced-callback
# or
npm i @kopexa/use-debounced-callback
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-event-listener
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-event-listener

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-event-listener
# or
npm i @kopexa/use-event-listener
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-file-upload
Description: a hook to handle file uploads easier
Author: Kopexa
Latest version: 17.0.71

# @kopexa/use-file-upload

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-file-upload
# or
npm i @kopexa/use-file-upload
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-hover
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-hover

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-hover
# or
npm i @kopexa/use-hover
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-is-mobile
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-is-mobile

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-is-mobile
# or
npm i @kopexa/use-is-mobile
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-safe-layout-effect
Description: Part of the Kopexa Sight Design System.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-safe-layout-effect

Part of the Kopexa Sight Design System.

> This is an internal utility, not intended for public usage.
- **Author:** Kopexa (<https://kopexa.com>)
- **License:** Apache-2.0
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)


## Installation

```sh
yarn add @kopexa/use-safe-layout-effect
# or
npm i @kopexa/use-safe-layout-effect
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).
npm package: @kopexa/use-unmount
Description: A React hook that runs a cleanup function when the component is unmounted.
Author: Kopexa
Latest version: 17.0.75

# @kopexa/use-unmount

A React hook that runs a cleanup function when the component is unmounted.

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @kopexa/use-unmount
# or
npm i @kopexa/use-unmount
```

## Usage

```tsx
import { useUnmount } from '@kopexa/use-unmount';

function MyComponent() {
  useUnmount(() => {
    // Cleanup logic here
  });
  return <div>...</div>;
}
```

## Credits

This hook is adapted from [usehooks-ts/use-unmount](https://github.com/juliencrn/usehooks-ts) with credit to the original authors.

## About kopexa

- Website: [https://kopexa.com](https://kopexa.com)
- GitHub: [https://github.com/kopexa-grc/sight](https://github.com/kopexa-grc/sight)

## Contribution

Contributions are welcome! See the [contributing guidelines](https://github.com/kopexa-grc/sight/blob/master/CONTRIBUTING.md) for details.

## License

This project is licensed under the terms of the [MIT license](https://github.com/kopexa-grc/sight/blob/master/LICENSE).