main 🧊 update readme for core

Author: babin

packages/core/README.md

@@ -1,12 +1,71 @@
-# 🚀 reactuse core
+<div align="center">
+  <a href="https://reactuse.dev">
+    <picture>
+      <img alt="React Use logo" src="https://siberiacancode.github.io/reactuse/logo.svg" height="128">
+    </picture>
+  </a>
+  <h1>React Use</h1>
 
-the largest and most useful hook library
+<a href="https://www.npmjs.com/package/@siberiacancode/reactuse"><img alt="NPM version" src="https://img.shields.io/npm/v/@reactuses/core.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://github.com/siberiacancode/reactuse/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/npm/l/@reactuses/core.svg?style=for-the-badge&labelColor=000000"></a>
+<a href="https://github.com/siberiacancode/reactuse/discussions"><img alt="Join the community on GitHub" src="https://img.shields.io/badge/Join%20the%20community-blueviolet.svg?style=for-the-badge&logo=React&labelColor=000000&logoWidth=20"></a>
 
-## 🦉 Philosophy
+</div>
 
-**🚀 React Use** this is a library that will allow you to easy and simple to use React hooks. Unlike its competitors, this package takes into account the features of React and also contains a huge number of useful hooks.
+React Use delivers **production-ready hooks** that solve real-world problems. Built with **TypeScript-first** approach, **SSR compatibility**, and **tree-shaking optimization** - everything you need to build modern React applications. Improve your react applications with our library 📦 designed for comfort and speed.
 
-## Features
+## Documentation
 
-- **TypeScript support out of the box** - full typed package
-- **SSR** - package work with server side render
+Visit https://siberiacancode.github.io/reactuse to view the full documentation.
+
+## Getting Started
+
+```bash
+npm install @siberiacancode/reactuse
+```
+
+```tsx
+import { useCounter } from '@reactuses/core';
+
+function App() {
+  const counter = useCounter(0);
+
+  return (
+    <div>
+      <h1>Count: {const.value}</h1>
+      <button onClick={() => const.inc()}>+1</button>
+      <button onClick={() => const.dec()}>-1</button>
+    </div>
+  );
+}
+```
+
+## CLI installation
+
+Use the CLI to add hooks to your project with [useverse](https://www.npmjs.com/package/useverse).
+
+```bash
+npx useverse@latest init
+```
+
+```bash
+npx useverse@latest add [hook]
+```
+
+You will be presented with a list of hooks to choose from:
+
+```bash
+Which hooks would you like to add? › Space to select. A to toggle all.
+Enter to submit.
+
+◯  useActiveElement
+◯  useAsync
+◯  useBattery
+◯  useBluetooth
+◯  useBoolean
+◯  useBreakpoints
+◯  useBrowserLanguage
+◯  useClickOutside
+◯  useClipboard
+◯  useConst
+```

packages/core/src/bundle/hooks/useAsync/useAsync.js

@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react';
  * @description - Hook that provides the state of an async callback
  * @category Utilities
  *
- * @param {() => Promise<Data>} callback - The async callback
- * @param {DependencyList} deps - The dependencies of the callback
- * @returns {UseAsyncReturn<Data>} - The state of the async callback
+ * @param {() => Promise<Data>} callback The async callback
+ * @param {DependencyList} deps The dependencies of the callback
+ * @returns {UseAsyncReturn<Data>} The state of the async callback
  *
  * @example
  * const { data, isLoading, isError, error } = useAsync(() => fetch('url'), [deps]);

packages/core/src/bundle/hooks/useDropZone/useDropZone.js

@@ -15,15 +15,15 @@ import { useRefState } from '../useRefState/useRefState';
  * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function
  * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function
  * @param {(event: DragEvent) => void} [options.onOver] The on over callback function
- * @returns {[boolean, File[] | null]} The object with drop zone states
+ * @returns {UseDropZoneReturn} The object with drop zone states
  *
  * @example
  * const { overed, files } = useDropZone(ref, options);
  *
  * @overload
  * @param {Target} target The target element drop zone's
  * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
- * @returns {[boolean, File[] | null]} The object with drop zone states
+ * @returns {UseDropZoneReturn} The object with drop zone states
  *
  * @example
  * const { overed, files } = useDropZone(ref, () => console.log('callback'));
@@ -35,14 +35,14 @@ import { useRefState } from '../useRefState/useRefState';
  * @param {(event: DragEvent) => void} [options.onEnter] The on enter callback function
  * @param {(event: DragEvent) => void} [options.onLeave] The on leave callback function
  * @param {(event: DragEvent) => void} [options.onOver] The on over callback function
- * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
+ * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref
  *
  * @example
  * const { ref, overed, files } = useDropZone(options);
  *
  * @overload
  * @param {(files: File[] | null, event: DragEvent) => void} [callback] The callback function to be invoked on drop
- * @returns {[StateRef<Target>, boolean, File[] | null]} The object with drop zone states and ref
+ * @returns {UseDropZoneReturn & { ref: StateRef<Target> }} The object with drop zone states and ref
  *
  * @example
  * const { ref, overed, files } = useDropZone(() => console.log('callback'));

packages/core/src/bundle/hooks/useShare/useShare.js

@@ -3,6 +3,8 @@
  * @description - Hook that utilizes the share api
  * @category Browser
  *
+ * @browserapi share https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share
+ *
  * @param {UseShareParams} [params] The use share options
  * @returns {UseShareReturn}
  *

packages/core/src/bundle/hooks/useStorage/useStorage.js

@@ -38,21 +38,27 @@ const getStorageItem = (storage, key) => {
  * @example
  * const { value, set, remove } = useStorage('key', 'value');
  */
-export const useStorage = (key, params) => {
+export const useStorage = (...params) => {
+  const key = params[0];
+  const secondParam = params[1];
   const options =
-    typeof params === 'object' &&
-    params &&
-    ('serializer' in params ||
-      'deserializer' in params ||
-      'initialValue' in params ||
-      'storage' in params)
-      ? params
+    typeof secondParam === 'object' &&
+    secondParam &&
+    ('serializer' in secondParam ||
+      'deserializer' in secondParam ||
+      'initialValue' in secondParam ||
+      'storage' in secondParam)
+      ? secondParam
       : undefined;
-  const initialValue = options ? options?.initialValue : params;
-  if (typeof window === 'undefined')
+  const initialValue = options ? options?.initialValue : secondParam;
+  if (typeof window === 'undefined') {
+    const value = typeof initialValue === 'function' ? initialValue() : initialValue;
     return {
-      value: typeof initialValue === 'function' ? initialValue() : initialValue
+      value,
+      set: () => {},
+      remove: () => {}
     };
+  }
   const serializer = (value) => {
     if (options?.serializer) return options.serializer(value);
     if (typeof value === 'string') return value;
@@ -88,7 +94,7 @@ export const useStorage = (key, params) => {
     return () => window.removeEventListener(STORAGE_EVENT, onChange);
   }, [key]);
   return {
-    value,
+    value: value,
     set,
     remove
   };