Type a value

The document title will update 3 seconds after no input change

import { useDebouncedValue } from "@mantine/hooks";
import React, { useState } from "react";
import {useComponentTitle} from "@jvllmr/react-component-titles"
import { TextInput } from "@mantine/core";

function TextInputComponent() {
  const [value, setValue] = useState("");
  const [debouncedValue] = useDebouncedValue(value, 3000);
  useDOMTitle(debouncedValue);
  return (
    <TextInput
      value={value}
      onChange={(e) => {
        setValue(e.currentTarget.value);
      }}
      description="The document title will update 3 seconds after no input change"
    />
  );
}

Simple Title Component

The next examples will be shown with the following component:

My title

import {useComponentTitle} from "@jvllmr/react-component-titles"
import { CircleCheck, CircleX } from "tabler-icons-react";
import { Center, SimpleGrid, Text } from "@mantine/core";

function TitleComponent(props: { title: string; active?: boolean }) {
  useDOMTitle(props.active ? props.title : "");
  const notActiveIcon = <CircleX color="red" size={50} />;
  const activeIcon = <CircleCheck color="green" size={50} />;
  const [icon, setIcon] = useState<React.ReactNode>(
    props.active ? activeIcon : notActiveIcon
  );

  useEffect(() => {
    setIcon(props.active ? activeIcon : notActiveIcon);
  }, [props.active]);

  return (
    <SimpleGrid style={{ margin: 50 }}>
      <Center>{icon}</Center>
      <Center>
        <Text>{props.title.trim()}</Text>
      </Center>
    </SimpleGrid>
  );
}

Obviously, the component only changes the title with external input:

My title

import { SimpleGrid, Button } from "@mantine/core";
function TitleButtonComponent(props: { title: string }) {
  const [active, setActive] = useState(false);

  return (
    <SimpleGrid>
      <TitleComponent title={props.title} active={active} />
      <Center style={{ marginTop: -80 }}>
        <Button
          color={active ? "gray" : "blue"}
          onClick={() => {
            setActive(!active);
          }}>
          Toggle
        </Button>
      </Center>
    </SimpleGrid>
  );
}

Chained titles

1st title

2nd title

3rd title

Removing in the middle does not break the chain

1st title

2nd title

3rd title

Same titles form a group

1st title

Loading...

Loading...

2nd title

But they only group when mounted right after each other

1st title

Loading...

2nd title

Loading...

Playground