You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
35 lines
1013 B
35 lines
1013 B
1 month ago
|
/**
|
||
|
|
* Client-only value Hook (Web version)
|
||
|
|
*
|
||
|
|
* This hook is used to provide different values for server-side rendering (SSR)
|
||
|
|
* and client-side rendering on web platforms.
|
||
|
|
*
|
||
|
|
* On web, we use `useEffect` to detect if we're on the client or server,
|
||
|
|
* since `useEffect` is not invoked during server rendering.
|
||
|
|
*
|
||
|
|
* @param server - Value to use during server-side rendering
|
||
|
|
* @param client - Value to use during client-side rendering
|
||
|
|
* @returns The appropriate value based on the rendering context
|
||
|
|
*
|
||
|
|
* @example
|
||
|
|
* ```tsx
|
||
|
|
* // Disable header on server, enable on client
|
||
|
|
* headerShown: useClientOnlyValue(false, true)
|
||
|
|
* ```
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
// `useEffect` is not invoked during server rendering, meaning
|
||
|
|
// we can use this to determine if we're on the server or not.
|
||
|
|
export function useClientOnlyValue<S, C>(server: S, client: C): S | C {
|
||
|
|
const [value, setValue] = React.useState<S | C>(server);
|
||
|
|
|
||
|
|
React.useEffect(() => {
|
||
|
|
setValue(client);
|
||
|
|
}, [client]);
|
||
|
|
|
||
|
|
return value;
|
||
|
|
}
|
||
|
|
|