☔


react-without-hydration

Skip the hydration step on the client for a component rendered server side.

npm i react-without-hydration

yarn add react-without-hydration

How to use

``js
import withoutHydration from "react-without-hydration";
import Card from "../Card";

const CardWithoutHydration = withoutHydration()(Card);

export default class App extends React.Component {
render() {
return ;
}
}
`

FAQ

$3

If the component isn't rendered server side, it will render and behave normally. You can disable this by setting disableFallback at true.

$3

You can use onUpdate to update the DOM after a props update.

Props

#### forceHydration

Pass forceHydration at true to force hydration even if the component was rendered server side.

`js
import withoutHydration from "react-without-hydration";
import Card from "../Card";

const CardWithoutHydration = withoutHydration()(Card);

export default class App extends React.Component {
render() {
return ;
}
}
`

Options

#### onUpdate

A function to update the DOM after a props update.

Receives props and ref which are the props passed to the component and its ref which represent the Dom node of the component.

`js
import withoutHydration from "react-without-hydration";
import Card from "../Card";

const CardWithoutHydration = withoutHydration({
onUpdate: ({ title }, ref) => {
ref.getElementsByClassName("title")[0].innerHTML = label;
}
})(Card);
`

#### disableFallback

A boolean set at false by default.

Allows you to disable the server-side rendering check, which means that the component will never be rendered, even if it has not been rendered on the server side. Can be usefull if you don't render a component wrapped by withoutHydration server side, but you do client side. Be cautious.

`js
import withoutHydration from "react-without-hydration";
import Card from "../Card";

const CardWithoutHydration = withoutHydration({
disableFallback: true
})(Card);
``