react-simplikit 0.0.46 → 0.0.48

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 CHANGED
@@ -1,42 +1,133 @@
1
- ![react-simplikit](./src/public/images/og.png)
1
+ # react-simplikit
2
2
 
3
- # react-simplikit · [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/slash/blob/main/LICENSE) [![codecov](https://codecov.io/gh/toss/react-simplikit/graph/badge.svg?token=RHVOZ3J3TU)](https://codecov.io/gh/toss/react-simplikit) [![Discord Badge](https://discord.com/api/guilds/1281071127052943361/widget.png?style=shield)](https://discord.gg/vGXbVjP2nY)
3
+ [![npm version](https://img.shields.io/npm/v/react-simplikit.svg)](https://www.npmjs.com/package/react-simplikit)
4
+ [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/toss/react-simplikit/blob/main/LICENSE)
5
+ [![codecov](https://codecov.io/gh/toss/react-simplikit/graph/badge.svg?token=RHVOZ3J3TU)](https://codecov.io/gh/toss/react-simplikit)
4
6
 
5
- English | [Korean](./README-ko_kr.md)
7
+ English | [한국어](./README-ko_kr.md)
6
8
 
7
- `react-simplikit` is a lightweight yet powerful library that provides various utilities for use in React environments.
9
+ A lightweight, zero-dependency React utilities library providing hooks, components, and utilities.
8
10
 
9
- - `react-simplikit` is dependency-free, making it extremely lightweight.
10
- - `react-simplikit` guarantees reliability with 100% test coverage.
11
- - `react-simplikit` offers JSDoc comments, detailed documentation, and examples to ensure any developer can easily use it.
11
+ ## Features
12
12
 
13
- ## Example
13
+ - **Zero dependencies** - Extremely lightweight
14
+ - **100% TypeScript** - Full type safety
15
+ - **100% Test coverage** - Reliable and stable
16
+ - **SSR-safe** - Works with Next.js and other SSR frameworks
17
+ - **Tree-shakeable** - Only bundle what you use
18
+
19
+ ## Library Direction
20
+
21
+ **react-simplikit is now maintained as a Universal Hook Library providing only pure state/logic hooks.**
22
+
23
+ We are repositioning react-simplikit to focus exclusively on **platform-independent hooks** that work seamlessly across web and mobile (React Native, etc.).
24
+
25
+ ### What's Maintained: Pure State/Logic Hooks
26
+
27
+ Hooks that don't depend on specific platform APIs will continue to be actively maintained:
28
+
29
+ - State management hooks like `useToggle`, `useBooleanState`, `useCounter`
30
+ - Lifecycle hooks like `usePrevious`, `useMount`
31
+ - Utility hooks like `useDebounce`, `useThrottle`
32
+ - **Backward compatibility (BC) is preserved** for these existing pure logic hooks
33
+
34
+ ### What's Deprecated: Browser/Platform-Dependent Hooks
35
+
36
+ The following hooks that strongly depend on browser-specific APIs are now deprecated:
37
+
38
+ - `useGeolocation` - depends on `navigator.geolocation`
39
+ - `useStorageState` - depends on `localStorage`/`sessionStorage`
40
+ - `useIntersectionObserver` - depends on `IntersectionObserver` API
41
+ - `useImpressionRef` - depends on `IntersectionObserver` + Visibility API
42
+ - `useDoubleClick`, `useLongPress` - depend on DOM events + `window.setTimeout`
43
+ - `useOutsideClickEffect` - depends on DOM events + `document`
44
+ - `useVisibilityEvent` - depends on `document.visibilityState`
45
+
46
+ These hooks:
47
+
48
+ - Will not receive new features or major enhancements
49
+ - Are marked as `@deprecated` in documentation
50
+ - May be removed in future major versions
51
+
52
+ ### Package Status
53
+
54
+ - react-simplikit will **not be archived**
55
+ - Pure state/logic hooks will continue to be maintained
56
+ - Critical bug fixes and minimal maintenance will continue
57
+ - No new browser/platform-dependent hooks will be added
58
+
59
+ ## Installation
60
+
61
+ ```bash
62
+ npm install react-simplikit
63
+ # or
64
+ yarn add react-simplikit
65
+ # or
66
+ pnpm add react-simplikit
67
+ ```
68
+
69
+ ## Quick Start
14
70
 
15
71
  ```tsx
16
- import { useBooleanState } from 'react-simplikit';
17
-
18
- function Component() {
19
- // using the `useBooleanState` hook to manage state.
20
- const [open, openBottomSheet, closeBottomSheet, toggleBottomSheet] =
21
- useBooleanState(false);
22
-
23
- return (
24
- <div>
25
- <p>Bottom Sheet State: {open ? 'Open' : 'Closed'}</p>
26
- <button onClick={openBottomSheet}>Open</button>
27
- <button onClick={closeBottomSheet}>Close</button>
28
- <button onClick={toggleBottomSheet}>Toggle</button>
29
- </div>
30
- );
72
+ import { useState, useEffect } from 'react';
73
+ import { useDebounce } from 'react-simplikit';
74
+
75
+ function SearchInput() {
76
+ const [query, setQuery] = useState('');
77
+ const debouncedQuery = useDebounce(query, 300);
78
+
79
+ useEffect(() => {
80
+ if (debouncedQuery) {
81
+ searchAPI(debouncedQuery);
82
+ }
83
+ }, [debouncedQuery]);
84
+
85
+ return <input value={query} onChange={e => setQuery(e.target.value)} />;
31
86
  }
32
87
  ```
33
88
 
34
- ## Contributing
89
+ ## What's Included
90
+
91
+ ### Hooks
92
+
93
+ | Hook | Description |
94
+ | ------------------------- | --------------------------------------------------- |
95
+ | `useBooleanState` | Manage boolean state with handlers |
96
+ | `useDebounce` | Debounce a value |
97
+ | `useDebouncedCallback` | Debounce a callback function |
98
+ | `useInterval` | Set up intervals declaratively |
99
+ | `useIntersectionObserver` | Observe element visibility |
100
+ | `usePreservedCallback` | Stable callback reference |
101
+ | `usePreservedReference` | Stable object reference |
102
+ | ... | [See all hooks](https://react-simplikit.slash.page) |
103
+
104
+ ### Components
35
105
 
36
- Contributions are welcome from everyone in the community. Please check the contribution guide linked below.
106
+ | Component | Description |
107
+ | ---------------- | --------------------------------- |
108
+ | `SwitchCase` | Declarative switch-case rendering |
109
+ | `Separated` | Render items with separators |
110
+ | `ImpressionArea` | Track element impressions |
111
+
112
+ ### Utilities
113
+
114
+ | Utility | Description |
115
+ | -------- | ----------------- |
116
+ | `assert` | Runtime assertion |
117
+ | `noop` | Empty function |
118
+
119
+ ## Documentation
120
+
121
+ Visit [react-simplikit.slash.page](https://react-simplikit.slash.page) for full documentation.
122
+
123
+ ## Related Packages
124
+
125
+ - [@react-simplikit/mobile](https://www.npmjs.com/package/@react-simplikit/mobile) - Mobile web utilities
126
+
127
+ ## Contributing
37
128
 
38
- [CONTRIBUTING](./src/docs/en/contributing.md)
129
+ We welcome contributions! Please see our [Contributing Guide](https://github.com/toss/react-simplikit/blob/main/CONTRIBUTING.md).
39
130
 
40
131
  ## License
41
132
 
42
- MIT © Viva Republica, Inc. For more details, see [LICENSE](./LICENSE)
133
+ MIT © Viva Republica, Inc. See [LICENSE](https://github.com/toss/react-simplikit/blob/main/LICENSE) for details.
@@ -6,6 +6,10 @@ type UseDoubleClickProps<E extends HTMLElement> = {
6
6
  doubleClick: (event: MouseEvent<E>) => void;
7
7
  };
8
8
  /**
9
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
10
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
11
+ * This hook will be removed in a future major version.
12
+ *
9
13
  * @description
10
14
  * `useDoubleClick` is a React hook that differentiates between single and double click events.
11
15
  * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
@@ -24,6 +24,10 @@ type GeolocationOptions = {
24
24
  mountBehavior?: GeolocationMountBehaviorType;
25
25
  } & PositionOptions;
26
26
  /**
27
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (navigator.geolocation).
28
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
29
+ * This hook will be removed in a future major version.
30
+ *
27
31
  * @description
28
32
  * `useGeolocation` is a React hook that retrieves and tracks the user's geographical location.
29
33
  * It uses the browser's `Geolocation API` to support both one-time position retrieval and continuous location tracking.
@@ -6,6 +6,10 @@ type UseImpressionRefOptions = Partial<{
6
6
  timeThreshold: number;
7
7
  }>;
8
8
  /**
9
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver, Visibility API).
10
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
11
+ * This hook will be removed in a future major version.
12
+ *
9
13
  * @description
10
14
  * `useImpressionRef` is a React hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
11
15
  * It uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
@@ -1,4 +1,8 @@
1
1
  /**
2
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
3
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
4
+ * This hook will be removed in a future major version.
5
+ *
2
6
  * @description
3
7
  * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
4
8
  * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -11,6 +11,10 @@ type UseLongPressOptions<E extends HTMLElement> = {
11
11
  onLongPressEnd?: Handler<E>;
12
12
  };
13
13
  /**
14
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
15
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
16
+ * This hook will be removed in a future major version.
17
+ *
14
18
  * @description
15
19
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
16
20
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -1,5 +1,9 @@
1
1
  type OneOrMore<T> = T | T[];
2
2
  /**
3
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
4
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
5
+ * This hook will be removed in a future major version.
6
+ *
3
7
  * @description
4
8
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
5
9
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -22,6 +22,10 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
22
22
  };
23
23
  type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
24
24
  /**
25
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
26
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
27
+ * This hook will be removed in a future major version.
28
+ *
25
29
  * @description
26
30
  * `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
27
31
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
@@ -2,6 +2,10 @@ type Options = {
2
2
  immediate?: boolean;
3
3
  };
4
4
  /**
5
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
6
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
+ * This hook will be removed in a future major version.
8
+ *
5
9
  * @description
6
10
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
7
11
  *
@@ -6,6 +6,10 @@ type UseDoubleClickProps<E extends HTMLElement> = {
6
6
  doubleClick: (event: MouseEvent<E>) => void;
7
7
  };
8
8
  /**
9
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
10
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
11
+ * This hook will be removed in a future major version.
12
+ *
9
13
  * @description
10
14
  * `useDoubleClick` is a React hook that differentiates between single and double click events.
11
15
  * It delays the single click callback execution for a specified time, and cancels it if a second click (i.e. a double click) occurs within that time.
@@ -24,6 +24,10 @@ type GeolocationOptions = {
24
24
  mountBehavior?: GeolocationMountBehaviorType;
25
25
  } & PositionOptions;
26
26
  /**
27
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (navigator.geolocation).
28
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
29
+ * This hook will be removed in a future major version.
30
+ *
27
31
  * @description
28
32
  * `useGeolocation` is a React hook that retrieves and tracks the user's geographical location.
29
33
  * It uses the browser's `Geolocation API` to support both one-time position retrieval and continuous location tracking.
@@ -6,6 +6,10 @@ type UseImpressionRefOptions = Partial<{
6
6
  timeThreshold: number;
7
7
  }>;
8
8
  /**
9
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver, Visibility API).
10
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
11
+ * This hook will be removed in a future major version.
12
+ *
9
13
  * @description
10
14
  * `useImpressionRef` is a React hook that measures the time a specific DOM element is visible on the screen and executes callbacks when the element enters or exits the viewport.
11
15
  * It uses `IntersectionObserver` and the `Visibility API` to track the element's visibility.
@@ -1,4 +1,8 @@
1
1
  /**
2
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (IntersectionObserver).
3
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
4
+ * This hook will be removed in a future major version.
5
+ *
2
6
  * @description
3
7
  * `useIntersectionObserver` is a React hook that detects whether a specific DOM element is visible on the screen.
4
8
  * It uses the `IntersectionObserver` API to execute a callback when the element enters or exits the viewport.
@@ -11,6 +11,10 @@ type UseLongPressOptions<E extends HTMLElement> = {
11
11
  onLongPressEnd?: Handler<E>;
12
12
  };
13
13
  /**
14
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, window.setTimeout).
15
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
16
+ * This hook will be removed in a future major version.
17
+ *
14
18
  * @description
15
19
  * `useLongPress` is a React hook that detects when an element is pressed and held for a specified duration.
16
20
  * It handles both mouse and touch events, making it work consistently across desktop and mobile devices.
@@ -1,5 +1,9 @@
1
1
  type OneOrMore<T> = T | T[];
2
2
  /**
3
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (DOM events, document).
4
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
5
+ * This hook will be removed in a future major version.
6
+ *
3
7
  * @description
4
8
  * `useOutsideClickEffect` is a React hook that triggers a callback when a click event occurs outside the specified container(s).
5
9
  * It is useful for closing modals, dropdowns, tooltips, and other UI components when clicking outside.
@@ -22,6 +22,10 @@ type StorageStateOptionsWithSerializer<T> = StorageStateOptions<T> & {
22
22
  };
23
23
  type SerializableGuard<T extends readonly any[]> = T[0] extends any ? T : T[0] extends never ? 'Received a non-serializable value' : T;
24
24
  /**
25
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (localStorage/sessionStorage).
26
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
27
+ * This hook will be removed in a future major version.
28
+ *
25
29
  * @description
26
30
  * `useStorageState` is a React that functions like `useState` but persists the state value in browser storage.
27
31
  * The value is retained across page reloads and can be shared between tabs when using `localStorage`.
@@ -2,6 +2,10 @@ type Options = {
2
2
  immediate?: boolean;
3
3
  };
4
4
  /**
5
+ * @deprecated This hook is deprecated as it depends on browser-specific APIs (document.visibilityState).
6
+ * react-simplikit is now focused on platform-independent, pure state/logic hooks.
7
+ * This hook will be removed in a future major version.
8
+ *
5
9
  * @description
6
10
  * `useVisibilityEvent` is a React hook that listens to changes in the document's visibility state and triggers a callback.
7
11
  *
package/package.json CHANGED
@@ -1,7 +1,22 @@
1
1
  {
2
2
  "name": "react-simplikit",
3
- "version": "0.0.46",
3
+ "version": "0.0.48",
4
4
  "main": "./dist/index.cjs",
5
+ "module": "./esm/index.js",
6
+ "types": "./dist/index.d.cts",
7
+ "exports": {
8
+ ".": {
9
+ "import": {
10
+ "types": "./esm/index.d.ts",
11
+ "default": "./esm/index.js"
12
+ },
13
+ "require": {
14
+ "types": "./dist/index.d.cts",
15
+ "default": "./dist/index.cjs"
16
+ }
17
+ },
18
+ "./package.json": "./package.json"
19
+ },
5
20
  "type": "module",
6
21
  "sideEffects": false,
7
22
  "keywords": [
@@ -11,7 +26,8 @@
11
26
  "bugs": "https://github.com/toss/react-simplikit/issues",
12
27
  "repository": {
13
28
  "type": "git",
14
- "url": "git+https://github.com/toss/react-simplikit.git"
29
+ "url": "git+https://github.com/toss/react-simplikit.git",
30
+ "directory": "packages/core"
15
31
  },
16
32
  "license": "MIT",
17
33
  "files": [
@@ -19,43 +35,20 @@
19
35
  "esm/**/*"
20
36
  ],
21
37
  "scripts": {
22
- "clean": "rimraf ./dist ./esm ./coverage ./node_modules",
23
- "scaffold": "tsx .scripts/index.ts scaffold",
24
- "docs:gen": "tsx .scripts/index.ts generate-docs",
25
- "docs:dev": "vitepress dev",
26
- "docs:build": "vitepress build",
27
- "docs:preview": "vitepress preview",
28
- "fix": "yarn run fix:lint && yarn run fix:format",
29
- "fix:format": "prettier . --write",
30
- "fix:lint": "eslint src --fix",
31
- "test": "yarn run test:lint && yarn run test:format && yarn run test:type && yarn run test:spec && yarn run test:coverage",
32
- "test:format": "prettier . --list-different",
33
- "test:lint": "eslint src",
34
- "test:type": "tsc --noEmit",
35
- "test:spec": "vitest run",
36
- "test:coverage": "vitest run --coverage",
37
- "prepack": "tsup"
38
+ "build": "tsup",
39
+ "clean": "rimraf ./dist ./esm",
40
+ "lint": "eslint src",
41
+ "typecheck": "tsc --noEmit",
42
+ "test": "vitest run",
43
+ "test:watch": "vitest",
44
+ "test:coverage": "vitest run --coverage"
38
45
  },
39
46
  "publishConfig": {
40
- "access": "public",
41
- "main": "./dist/index.cjs",
42
- "types": "./dist/index.d.cts",
43
- "module": "./esm/index.js",
44
- "exports": {
45
- ".": {
46
- "import": {
47
- "types": "./esm/index.d.ts",
48
- "default": "./esm/index.js"
49
- },
50
- "require": {
51
- "types": "./dist/index.d.cts",
52
- "default": "./dist/index.cjs"
53
- }
54
- },
55
- "./package.json": "./package.json"
56
- }
47
+ "access": "public"
57
48
  },
58
49
  "devDependencies": {
50
+ "@changesets/changelog-github": "^0.5.1",
51
+ "@changesets/cli": "^2.29.7",
59
52
  "@eslint/js": "^9.16.0",
60
53
  "@testing-library/dom": "^10.4.0",
61
54
  "@testing-library/jest-dom": "^6.6.3",
@@ -100,21 +93,5 @@
100
93
  },
101
94
  "peerDependencies": {
102
95
  "react": "*"
103
- },
104
- "packageManager": "yarn@4.10.2",
105
- "module": "./esm/index.js",
106
- "exports": {
107
- ".": {
108
- "import": {
109
- "types": "./esm/index.d.ts",
110
- "default": "./esm/index.js"
111
- },
112
- "require": {
113
- "types": "./dist/index.d.cts",
114
- "default": "./dist/index.cjs"
115
- }
116
- },
117
- "./package.json": "./package.json"
118
- },
119
- "types": "./dist/index.d.cts"
120
- }
96
+ }
97
+ }
package/LICENSE DELETED
@@ -1,21 +0,0 @@
1
- MIT License
2
-
3
- Copyright (c) 2025 Viva Republica, Inc
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.