docs

aldrinpvincent · Mar 4, 2022 · ce4603e · ce4603e
1 parent d65e9ab
commit ce4603e
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 172 deletions.
diff --git a/docs/docs/Installation.md b/docs/docs/Installation.md
diff --git a/docs/docs/useDebounce.md b/docs/docs/useDebounce.md
@@ -1,6 +1,8 @@
 # useDebounce
 
-A hook to debounce value change. This can be used to perform an expensive operation based on react state, props or any calculated value.
+A hook to debounce value changes. This can be used to perform an expensive operation based on react state, props or any calculated value.
+
+<pre>{`import {useDebounce} from 'react-use-custom-hooks';`}</pre>
 
 ### Usage example
 
@@ -41,30 +43,10 @@ function DebounceExample(props) {
 
 ### API
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="js" label="JavaScript">
-
 ```typescript
-const debouncedValue = useDebounce(value, delay);
+function useDebounce<T>(value: T, delay?: number = 500);
 ```
 
-</TabItem>
-<TabItem value="ts" label="Typescript">
-
-```typescript
-const debouncedValue: T = useDebounce<T>(
-  value: T,
-  delay?: number
-);
-```
-
-</TabItem>
-
-</Tabs>
-
 #### Params
 
 | Property | Description                | Type     | Default |

diff --git a/docs/docs/useIsMounted.md b/docs/docs/useIsMounted.md
@@ -2,6 +2,8 @@
 
 This hook is used to check whether the component is mounted or not. This hook will return a function which will return a boolean value stating the component is mounted or not on calling. This will be useful if you want to perform some operation based on component is mounted or not like stop polling an api, update state etc.
 
+<pre>{`import {useIsMounted} from 'react-use-custom-hooks';`}</pre>
+
 ### Usage example
 
 ```typescript
@@ -37,23 +39,6 @@ function IsMountedExample(props) {
 
 ### API
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="js" label="JavaScript">
-
-```js
-const isMounted = useIsMounted();
-```
-
-</TabItem>
-<TabItem value="ts" label="Typescript">
-
 ```typescript
-const isMounted: () => Boolean = useIsMounted();
+function useIsMounted(): () => Boolean;
 ```
-
-</TabItem>
-
-</Tabs>
diff --git a/docs/docs/useLegacyState.md b/docs/docs/useLegacyState.md
@@ -0,0 +1,49 @@
+# useLegacyState
+
+This hook works similar to `this.setState` works in react class components. Here when you call `setState`, it shallow merges state partial into current state. It will be useful when you want change a class component to functional component.
+
+<pre>{`import {useLegacyState} from 'react-use-custom-hooks';`}</pre>
+
+### Usage example
+
+```typescript
+const [state, setState] = useLegacyState({ firstName: 'John' });
+
+setState({ lastName: 'Doe' }); // state -> { firstName: 'John', lastName: Doe }
+```
+
+### Playground
+
+```jsx live
+function LegacyStateExample(props) {
+  const [state, setState] = useLegacyState({ firstName: 'John' });
+
+  return (
+    <>
+      <div>state - {JSON.stringify(state, null, 2)} </div>
+      <input
+        type="text"
+        placeholder="Last name"
+        onChange={e => setState({ lastName: e.target.value })}
+      />
+      <br />
+      <input
+        type="number"
+        placeholder="Age"
+        onChange={e => setState({ age: e.target.value })}
+      />
+    </>
+  );
+}
+```
+
+### API
+
+```typescript
+function useSetState<T extends Record<string, any>>(
+  initialState: T
+): readonly [
+  T,
+  (statePartial: Partial<T> | ((currentState: T) => Partial<T>)) => void
+];
+```
diff --git a/docs/docs/usePrevious.md b/docs/docs/usePrevious.md
@@ -2,6 +2,8 @@
 
 If you want to access the previous props or state in functional components, you can use the `usePrevious` hook. This hook would work for props, state, or any other calculated value.
 
+<pre>{`import {usePrevious} from 'react-use-custom-hooks';`}</pre>
+
 ### Usage example
 
 ```typescript
@@ -18,14 +20,16 @@ function PreviousStateExample(props) {
 
   return (
     <div>
-      Current value: <b>{count}</b>, Previous value: <b>{prevCount}</b>
+      Current value: <b>{count}</b>
+      <br />
+      Previous value: <b>{prevCount}</b>
       <br />
-      <button onClick={() => setCount(count + 1)}>+ count</button>
+      <button onClick={() => setCount(count + 1)}>++ count</button>
       <button
         style={{ marginLeft: '10px' }}
         onClick={() => setCount(count - 1)}
       >
-        - count
+        -- count
       </button>
     </div>
   );
@@ -34,27 +38,10 @@ function PreviousStateExample(props) {
 
 ### API
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-<Tabs>
-<TabItem value="js" label="JavaScript">
-
-```js
-const previousState = usePrevious(state);
-```
-
-</TabItem>
-<TabItem value="ts" label="Typescript">
-
 ```typescript
-const previousState: T = usePrevious<T>(state: T);
+function usePrevious<T>(value: T): T | undefined;
 ```
 
-</TabItem>
-
-</Tabs>
-
 #### Params
 
 | Property | Description                                       | Type  | Default |

diff --git a/docs/docs/useSafeState.md b/docs/docs/useSafeState.md
@@ -1,11 +1,13 @@
 # useSafeState
 
-A memory safe version of react's `useState` hook. In react memory leak occurs when `setState` operation performed on an unmounted component and leak happens mostly with asynchronous opration like AJAX calls.
+A memory safe version of react's `useState` hook. In react, on way memory leak occurs when `setState` operation performed on an unmounted component and it happens mostly with asynchronous opration like AJAX calls.
 
 For example, if the user initiated an AJAX call and navigated away from tha page before the call is returned, the component will get unmounted and when the api call is fulfilled, the `setstate` will be performed on the unmounted component causing a memory leak.
 
 This hook will prevent these kind of memory leaks by checking whether the component is mounted before `setstate` operation, if the component is unmounted, it will jsut ignore the `setstate` call. The API is same as react's `useState` hook, so you can use this hook instead of `useState` for asynchronous opration to avoid any memory leak.
 
+<pre>{`import {useSafeState} from 'react-use-custom-hooks';`}</pre>
+
 ### Usage example
 
 ```typescript
@@ -16,40 +18,20 @@ const [value, setvalue] = useSafeState(initialState);
 
 ```jsx live
 function SafeStateExample(props) {
-  const [visible, setVisible] = useState(true);
-
-  return (
-    <div>
-      <button onClick={() => setVisible(false)}>Unmount</button>
-      {visible && <Child />}
-    </div>
-  );
-}
-```
-
-### API
-
-```js
-const [state, setState] = useSafeState(initialState);
-```
-
-<!-- import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+  const [data, setData] = useSafeState();
 
-<Tabs>
-<TabItem value="js" label="JavaScript">
+  useEffect(() => {
+    setTimeout(() => {
+      setData('some value');
+    }, 3000);
+  }, []);
 
-```js
-const [state, setState] = useSafeState(initialState);
+  return <div>{data || 'loading...'}</div>;
+}
 ```
 
-</TabItem>
-<TabItem value="ts" label="Typescript">
+### API
 
 ```typescript
-const [state, setState] = useSafeState(initialState);
+function useSafeState<T>(initialState: T): [T, (value: T) => void];
 ```
-
-</TabItem>
-
-</Tabs> -->
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -6,8 +6,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: 'react use custom hooks',
-  tagline: 'a collection of react custom hooks',
+  title: 'React use custom hooks',
+  tagline: 'Collection of React Custom Hooks',
   url: 'https://your-docusaurus-test-site.com',
   baseUrl: '/',
   onBrokenLinks: 'throw',
@@ -54,7 +54,7 @@ const config = {
         // title: 'Hooks studio',
         logo: {
           alt: 'Hooks studio logo',
-          src: 'img/logo.png',
+          src: 'img/h2.svg',
         },
         items: [
           // {
@@ -73,15 +73,15 @@ const config = {
       footer: {
         style: 'dark',
         links: [
-          {
-            title: 'Docs',
-            items: [
-              {
-                label: 'Custom hooks',
-                to: '/docs/hooks',
-              },
-            ],
-          },
+          // {
+          //   title: 'Docs',
+          //   items: [
+          //     {
+          //       label: 'Custom hooks',
+          //       to: '/docs/hooks',
+          //     },
+          //   ],
+          // },
           // {
           //   title: 'Community',
           //   items: [

diff --git a/docs/src/components/HomepageFeatures.js b/docs/src/components/HomepageFeatures.js
diff --git a/docs/src/components/HookDetails.js b/docs/src/components/HookDetails.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import styles from './HookDetails.module.css';
+
+export default function HookDetails() {
+  return (
+    <section className={styles.features}>
+      <div className="container">
+
+        <h3 className={styles.red}>
+          Installation
+        </h3>
+        <pre>
+          npm install --save react-use-custom-hooks
+          <br />
+          yarn add react-use-custom-hooks
+        </pre>
+        <h3 className={styles.red}>
+          Usage
+        </h3>
+        <pre>
+          {`import {useSafeState} from 'react-use-custom-hooks';`}
+        </pre>
+      </div>
+    </section>
+  );
+}