@react-useful-hooks/use-mount NPM

☀ use-mount

📌 Table of contents

🔮 Preview
🚧 Problem
💡 Solution
🌈 API
📝 Example
🏆 Contributors
🚀 Contribution
🧑‍💻 Issues
🚧 License
🦄 Sponsors

🔮 Preview

use-mount provide react hook and component to handle rendering either server side or client side.

Server Side	Client Side

🚧 Problem

Using SSR in react, there are always cicumstances to control server side rendering(SSR). And there are components like NoSSR. Although Nuxt.js support ClientOnly Component, Next.js does not support ClientOnly Component.

💡 Solution

useMount supports to easily handle server side rendering(SSR). use-mount package not only provide react hook, which can easily manipulate to not rendering specific component in server side, but also support ClientOnly Component, which known as NoSSR Component but has more controls.

# yarn
yarn add @react-useful-hooks/use-mount
# npm
npm install @react-useful-hooks/use-mount

🌈 API

use-mount package provide useMount react hook and ClientOnly Component.

import { useMount, ClientOnly } from '@react-useful-hooks/use-mount';

useMount

type isMount = boolean;
type useMount = (callback?: () => void, deps?: any[]) => isMount;

useMount return type

return	type	description	default
isMount	boolean	isMount value will turn true when hydration statred	false

useMount param type

params	type	description	default
callback	function	callback will be called when hydration started	undefined
deps	any[]	any dependencies regarding callback function just like useEffect	undefined

ClientOnly

type ClientOnly = ({
	children,
	fallback,
	fallbackTag,
	...delegates
}) => ReactElement;

ClientOnly props type

props	type	description	default
children	ReactElement	children will be rendered when hydration started	undefined
fallback	string or ReactElement	fallback will be rendered at server side	undefined
fallbackTag	keyof JSX.IntrinsicElements	can switch parent tag such as h1, h2, ...etc	'div'
delegates	any[]	delagates are attributes for HTML tags such as label, aria-label, href, ...etc	undefined

📝 Example

useMount

function Test() {
	const isMounted = useMount(() => {
		console.log('mounted!');
		return () => {
			console.log('unmounted!');
		};
	}, []);
}

ClinetOnly

1. Only rendering text

function Test() {
	/**
	 * @description
	 * This Component will render
	 * <div>useMount</div>
	 * in server side.
	 */
	return (
		<ClientOnly fallback={'useMount'}>
			<div>hello</div>
		</ClientOnly>
	);
}

2. Rendering with different tag

function Test() {
	/**
	 * @description
	 * This Component will render
	 * <h1>useMount</h1>
	 * in server side.
	 */
	return (
		<ClientOnly fallback="useMount" fallbackTag="h1">
			<div>hello</div>
		</ClientOnly>
	);
}

// also you can pass any atrributes to fallback tag
function Test() {
	/**
	 * @description
	 * This Component will render
	 * <h1 aria-label='hello'>useMount</h1>
	 * in server side.
	 */
	return (
		<ClientOnly fallback="useMount" fallbackTag="h1" aria-label="hello">
			<div>hello</div>
		</ClientOnly>
	);
}

3. Rendering Component

function ServerSide() {
	return <h1>useMount</h1>;
}

function Test() {
	/**
	 * @description
	 * This Component will render
	 * <h1>useMount</h1>
	 * in server side.
	 */
	return (
		<ClientOnly fallback={<ServerSide />}>
			<div>hello</div>
		</ClientOnly>
	);
}