feat(docs): update jsdoc and readme

Author: Griko Nibras

README.md

@@ -8,8 +8,8 @@ Toggle custom hook and component wrapper for React 🔦
 
 **Table of contents**
 
-- [Install](#install)
-- [Usage](#usage)
+- [Installing](#installing)
+- [Example usage](#example-usage)
   - [Toggle hook](#toggle-hook)
   - [Toggle wrapper](#toggle-wrapper)
 - [Suggestions and/or questions](#suggestions-andor-questions)
@@ -18,7 +18,7 @@ Toggle custom hook and component wrapper for React 🔦
 
 ---
 
-## Install
+## Installing
 
 ```sh
 # using npm
@@ -28,7 +28,7 @@ npm install @kodingdotninja/use-toggle
 yarn add @kodingdotninja/use-toggle
 ```
 
-## Usage
+## Example usage
 
 ### Toggle hook
 
@@ -52,9 +52,9 @@ function App() {
 ### Toggle wrapper
 
 ```jsx
-import { ToggleWrap } from "..";
+import { ToggleWrap } from "kodingdotninja/use-toggle";
 
-export default function App() {
+function App() {
   return (
     <ToggleWrap>
       {({ state, disable, enable, set, toggle }) => (

src/toggle-wrap.tsx

@@ -5,6 +5,9 @@ import { useToggle, UseToggleReturnType } from "./use-toggle";
 export const ENABLE_ON_MOUNT_KEY = "enableOnMount";
 export const DISABLE_ON_MOUNT_KEY = "disableOnMount";
 
+/**
+ * Toggle wrap props for determining if toggle should be enabled or disabled on mount.
+ */
 export type OnMountProps = { [ENABLE_ON_MOUNT_KEY]?: boolean } | { [DISABLE_ON_MOUNT_KEY]?: boolean };
 
 export type ToggleWrapProps = OnMountProps & {
@@ -14,6 +17,26 @@ export type ToggleWrapProps = OnMountProps & {
 
 export type ToggleWrapType = (props: ToggleWrapProps) => JSX.Element;
 
+/**
+ * Toggle wrap component which accepts initial state and enable/disable on mount prop.
+ * Returns a render function to consume the toggle hook.
+ *
+ * ---
+ *
+ * @param props Toggle wrap props
+ *
+ * @returns Render function to consume the toggle hook
+ *
+ * @example
+ *
+ * ```jsx
+ * <ToggleWrap>
+ *    {({ state, disable, enable, set, toggle }) => (
+ *      <div>...</div>
+ *    )}
+ *  </ToggleWrap>
+ * ```
+ */
 export const ToggleWrap: ToggleWrapType = ({ initialState, children, ...props }) => {
   const toggle = useToggle(initialState);
 

src/use-toggle.ts

@@ -10,8 +10,23 @@ export type UseToggleReturnType = {
 
 export type UseToggleType = (initialState?: boolean) => UseToggleReturnType;
 
+/**
+ * Toggle hook which accepts initial state and returns the toggle state and controls.
+ *
+ * ---
+ *
+ * @param initalState Initial value for toggle hook
+ *
+ * @returns Toggle value and controls
+ *
+ * @example
+ *
+ * ```jsx
+ * const { state, disable, enable, set, toggle } = useToggle(initalState);
+ * ```
+ */
 export const useToggle: UseToggleType = (initalState = false) => {
-  const [state, setState] = React.useState(initalState);
+  const [state, setState] = React.useState(() => Boolean(initalState));
 
   const disable = React.useCallback(() => setState(true), []);
   const enable = React.useCallback(() => setState(true), []);