[FEAT] Add Missing Documentation For Features

[DavidHDev]

Description These are the hooks/utilities that are currently not documented in the /docs directory:

Hooks

• [x] useBatteryStatus()
• [ ] useCookie()
• [x] useDeviceOS()
• [ ] useCookieListener()
• [x] useFullscreen()
• [ ] useInterval()
• [ ] useMutation()
• [ ] useNetwork()
• [x] useSize()
• [x] useWindowSize()
• [ ] useOrientation()
• [x] useIntersectionObserver()

Utilities

• [ ] < Image />

Acceptance Criteria

• [ ] The documentation for a hook/utility should show, as best as possible, how it works in action, so a complete usage example
• [ ] The newly added item should be referenced in all other instances where other items are referenced in the docs/readme.

Technical Details

• Each documentation page is a .mdx file that imports a demo component (e.g: useFavicon.mdx uses the UseFaviconDemo.jsx component to show the functionality of the hook).

[francoisdillinger]

I attempted to add a .mdx file with a demo component but encountered errors. This issue arose when I tried to create documentation for useWindowSize() and useOrientation().

Issue Details

When I installed and started the Docusaurus page locally, I encountered an error when navigating to the useWindowSize.mdx page:

This error occurred with the following import:

I then tried importing it locally from the fork build like this:

However, I encountered the following error:

Investigation

I checked the node_modules directory and noticed that the installed version of react-haiku does not include the updated hooks, even though it claims to be the latest version. I also checked npmjs.com and found that the newer hooks are not listed there either, which is why I attempted to import the hooks locally. Unfortunately, this approach did not resolve the issue.

Request for Guidance

I'm relatively new to open-source contributions and may have overlooked some instructions. I didn't want to make changes to the configuration files that might cause more problems when submitting pull requests. Any advice or guidance you can provide would be greatly appreciated.

[DavidHDev]

Hi @francoisdillinger , I forgot to mention this, sorry! Of course the installed version of react-haiku won't include the new hooks since the version that would contain them has not been released on NPM yet, and importing them locally using the dist is not a good option. If you want to test hooks in the docs that have not been released, you'd have to follow these steps:

1. In the root folder of the repo:

   • npm run build to build the hook library locally
   • npm link to link the local version of the library to your global environment

2. In the docs folder:

   • Delete the existing react-haiku folder from the node_modules directory
   • npm link react-haiku to activate the link with the local version of the library
   • Now you can check the linked react-haiku package in the node_modules directory (it should have a little arrow to the right of the package name) and see that it includes the updates that are not released yet

I'll make sure to add these details to the CONTRIBUTING.md page, thanks for reminding me!

I would update the version right now, but I don't want to make too many releases, the plan being to gather more features first..

[francoisdillinger]

@DavidHDev, I appreciate the guidance; it got me almost there. However, I encountered one final issue. After following those steps, I still received the error Cannot read properties of null (reading 'useRef'). Through trial and error, I managed to get it working by deleting the react module in the root folder of the repo before running npm start in the docs folder.

Here are the steps I followed from the root folder:

1. In the root folder of the repo:

   npm install  # Install dependencies
   npm run build  # Build the hook library locally
   npm link  # Or `sudo npm link` if you don't have admin access, to link the local version of the library to your global environment
   rm -rf node_modules/react  # Remove the `react` folder from the `root` directory `node_modules`

2. In the docs folder:

   npm install  # Install dependencies
   rm -rf node_modules/react-haiku  # Remove the `react-haiku` module from `node_modules`
   npm link react-haiku  # Activate the link with the local version of the library
   npm start  # Start Docusaurus and launch the site locally

I'm not sure if anyone else will encounter these issues, but I thought it would be helpful to lay out the steps I took to get it working. I'll commit changes later for just the useWindowSize hook and make a pull request to ensure everything is working before updating the documentation for any other missing hooks.

[DavidHDev]

@francoisdillinger if you tried to use "useRef" directly through an import, eg: import { useRef} from 'react, that won't work due to the way the Docusaurus project is structured at the moment.

If you open any of the other Demo components, you'll see that all the files import React directly to use the built-in hooks:

Example from useDebounce demo:

import { useDebounce } from "react-haiku"
import React from 'react'; // here
import './demo.css';

export const UseDebounceDemo = () => {
    const [value, setValue] = React.useState('')
    const debouncedValue = useDebounce(value, 1000)

    const handleChange = (event) => setValue(event.target.value)

    React.useEffect(() => {
        console.log(debouncedValue);
    }, [debouncedValue])
...

All demo components should respect this structure for now, otherwise the build won't work

[francoisdillinger]

@DavidHDev, thats what was confusing me, I wasn't using a "useRef", it was throwing that error when I tried running the site locally before I even modified any demo files. The site wouldn't run at all. It may just be an issue on my end.

[francoisdillinger]

@DavidHDev, quick question. I was thinking of the details for the useIntersectionObserver and while centering the rootMargin would be easy to show the box intersecting the center of the screen, there is potential that someone on a large screen won't have overflow so there is no scrolling. Would it be better to create a centered container with set height and make the inner content scrollable, or is there another way you'd want that done? Thanks.

[DavidHDev]

@francoisdillinger if you go with the centered container make sure to label it as "viewport" since the hook has no support for targeting containers, but the simplest way would be to just not overthink what happens on bigger screens, if someone wants to see the hook in action from a bigger screen they can just zoom in to get the overflow