☀ 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>
	);
}

🏆 Contributors

Thanks goes to these wonderful people.

🚀 Contribution

Looking to contribute? Look for the Good First Issue label.

Please make sure to read the Contributing Guide before making any pull requests.

🧑‍💻 Issues

🐛 Bugs

Please post issue for bugs, missing documetations, or unexpected behavior

Click for bug-report

⭐️ Feature Requests

Please post issue to suggest new features.

Click for featrure-request

🚧 License

MIT

🦄 Sponsors

Become first sponsor this project!

Check out more useful react hooks here. If you have any questions, feel free to join our slack