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"
/>
);
}
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>
);
}
1st title
2nd title
3rd title
1st title
2nd title
3rd title
1st title
Loading...
Loading...
2nd title
1st title
Loading...
2nd title
Loading...