useFirstVisit

React hook to detect if it is the user's first visit.

Add the hook via the CLI:

npm

npx @novajslabs/cli add useFirstVisit

yarn

npx @novajslabs/cli add useFirstVisit

pnpm

pnpm dlx @novajslabs/cli add useFirstVisit

Or copy and paste the code into your project:

TypeScript

import { useState } from "react";

export const useFirstVisit = (): boolean => {
  const [isFirstVisit, setIsFirstVisit] = useState<boolean>(false);

  const firstVisit = localStorage.getItem("firstVisit");

  if (firstVisit === null) {
    localStorage.setItem("firstVisit", "true");
    setIsFirstVisit(true);
  }

  return isFirstVisit;
};

JavaScript

import { useState } from "react";

export const useFirstVisit = () => {
  const [isFirstVisit, setIsFirstVisit] = useState(false);

  const firstVisit = localStorage.getItem("firstVisit");

  if (firstVisit === null) {
    localStorage.setItem("firstVisit", "true");
    setIsFirstVisit(true);
  }

  return isFirstVisit;
};

Requirements

React 16.8 or higher

Return values

isFirstVisit

Type: boolean

Represents whether it is the user's first visit (true) or not (false).

Examples of common use cases

• Handle first-time visitors