a4117c94b0
## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Deployed on https://with-fingerprintjs-pro.vercel.app/
25 lines
767 B
TypeScript
25 lines
767 B
TypeScript
import { PropsWithChildren, useState } from 'react'
|
|
|
|
function Toggler({ children }: PropsWithChildren<{}>) {
|
|
const [showChildren, setShowChildren] = useState(true)
|
|
|
|
return (
|
|
<div className="toggler">
|
|
<p>
|
|
You can open the Network tab in your browser Dev Tools and see new
|
|
requests being made depending on the <b>caching algorithm</b> as you
|
|
unmount the component with the fingerprint and mount it again thus
|
|
calling the <code>useVisitorData</code> hook.
|
|
</p>
|
|
<button
|
|
className="toggle-button"
|
|
onClick={() => setShowChildren((show) => !show)}
|
|
>
|
|
{showChildren ? 'Hide' : 'Show'} visitor data
|
|
</button>
|
|
{showChildren && children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Toggler
|