@kopexa/react-utils 1.0.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
# @kopexa/react-utils
|
|
2
|
+
|
|
3
|
+
A powerful utility toolkit for advanced React development, part of the Kopexa Sight Design System.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Overview
|
|
8
|
+
|
|
9
|
+
`@kopexa/react-utils` provides essential utilities for building robust, scalable, and maintainable React applications. It includes advanced context creation and ref management utilities, designed for modern React (v19+) and seamless integration with the Kopexa Sight ecosystem.
|
|
10
|
+
|
|
11
|
+
- **Author:** Kopexa (<https://kopexa.com>)
|
|
12
|
+
- **License:** MIT
|
|
13
|
+
- **Repository:** [kopexa-grc/sight](https://github.com/kopexa-grc/sight)
|
|
14
|
+
|
|
15
|
+
## Features
|
|
16
|
+
|
|
17
|
+
- **createContext**: Type-safe, ergonomic context creation with strict mode and custom error messages.
|
|
18
|
+
- **mergeRefs**: Effortlessly merge multiple refs (callback and object) for advanced component composition.
|
|
19
|
+
- **TypeScript-first**: Fully typed APIs for maximum safety and DX.
|
|
20
|
+
- **Zero dependencies**: Only peer-depends on React.
|
|
21
|
+
|
|
22
|
+
## Installation
|
|
23
|
+
|
|
24
|
+
```sh
|
|
25
|
+
pnpm add @kopexa/react-utils
|
|
26
|
+
# or
|
|
27
|
+
yarn add @kopexa/react-utils
|
|
28
|
+
# or
|
|
29
|
+
npm install @kopexa/react-utils
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## API
|
|
33
|
+
|
|
34
|
+
### `createContext<T>(options?: CreateContextOptions<T>): [Provider, useContext, Context]`
|
|
35
|
+
|
|
36
|
+
A strict, ergonomic alternative to React's context API.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { createContext } from '@kopexa/react-utils';
|
|
40
|
+
|
|
41
|
+
const [Provider, useMyContext] = createContext<number>({
|
|
42
|
+
name: 'MyContext',
|
|
43
|
+
strict: true,
|
|
44
|
+
hookName: 'useMyContext',
|
|
45
|
+
providerName: 'MyProvider',
|
|
46
|
+
});
|
|
47
|
+
|
|
48
|
+
function MyComponent() {
|
|
49
|
+
const value = useMyContext();
|
|
50
|
+
// ...
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
#### Options
|
|
55
|
+
- `strict` (default: true): Throws if context is missing.
|
|
56
|
+
- `hookName`, `providerName`, `errorMessage`, `name`, `defaultValue`: Customize error and context behavior.
|
|
57
|
+
|
|
58
|
+
### `mergeRefs<T>(...refs: Ref<T>[]): Ref<T>`
|
|
59
|
+
|
|
60
|
+
Merge multiple refs (callback or object) into a single ref for advanced component composition.
|
|
61
|
+
|
|
62
|
+
```tsx
|
|
63
|
+
import { mergeRefs } from '@kopexa/react-utils';
|
|
64
|
+
|
|
65
|
+
function MyInput(props, ref) {
|
|
66
|
+
return <input ref={mergeRefs(ref, props.innerRef)} />;
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
## Best Practices
|
|
71
|
+
|
|
72
|
+
- Use `createContext` for all new context providers in your app or library for safer, more maintainable code.
|
|
73
|
+
- Use `mergeRefs` when you need to forward refs to multiple consumers (e.g., HOCs, hooks, portals).
|
|
74
|
+
|
|
75
|
+
## Why Kopexa Sight?
|
|
76
|
+
|
|
77
|
+
Kopexa Sight is dedicated to building reliable, developer-friendly open source tools. This package is designed for clarity, stability, and best practices, inspired by the Google API Design Guide.
|
|
78
|
+
|
|
79
|
+
## License
|
|
80
|
+
|
|
81
|
+
MIT © Kopexa
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kopexa/react-utils",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"description": "A set of utilities for react on client side",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react-utils"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"react": ">=19.0.0-rc.0"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@kopexa/shared-utils": "1.
|
|
31
|
+
"@kopexa/shared-utils": "1.1.0"
|
|
32
32
|
},
|
|
33
33
|
"clean-package": "../../../clean-package.config.json",
|
|
34
34
|
"module": "dist/index.mjs",
|