Security News
PyPI’s New Archival Feature Closes a Major Security Gap
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
@react-useful-hooks/use-mount
Advanced tools
react hook and component that supports to easily handle different renders between server side and client side.
use-mount
provide react hook and component to handle rendering either server side or client side.
Server Side | Client Side |
---|---|
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.
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
use-mount package provide useMount react hook
and ClientOnly Component
.
import { useMount, ClientOnly } from '@react-useful-hooks/use-mount';
type isMount = boolean;
type useMount = (callback?: () => void, deps?: any[]) => isMount;
return | type | description | default |
---|---|---|---|
isMount | boolean | isMount value will turn true when hydration statred | false |
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 |
type ClientOnly = ({
children,
fallback,
fallbackTag,
...delegates
}) => ReactElement;
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 |
function Test() {
const isMounted = useMount(() => {
console.log('mounted!');
return () => {
console.log('unmounted!');
};
}, []);
}
function Test() {
/**
* @description
* This Component will render
* <div>useMount</div>
* in server side.
*/
return (
<ClientOnly fallback={'useMount'}>
<div>hello</div>
</ClientOnly>
);
}
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>
);
}
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>
);
}
Thanks goes to these wonderful people.
Looking to contribute? Look for the Good First Issue label.
Please make sure to read the Contributing Guide before making any pull requests.
Please post issue for bugs, missing documetations, or unexpected behavior
Please post issue to suggest new features.
Become first sponsor this project!
Check out more useful react hooks here.
If you have any questions, feel free to join our slack
FAQs
react hook and component that supports to easily handle different renders between server side and client side.
The npm package @react-useful-hooks/use-mount receives a total of 15 weekly downloads. As such, @react-useful-hooks/use-mount popularity was classified as not popular.
We found that @react-useful-hooks/use-mount demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.
Security News
CISA's KEV data is now on GitHub, offering easier access, API integration, commit history tracking, and automated updates for security teams and researchers.