Toolkit for writing React apps that run on the client (CSR) and the server (SSR)
## What is this? 🧐
A collection of React hooks and components for writing isomorphic applications.
## Examples 🚀
[Try the CodeSandbox Example!](https://codesandbox.io/s/silly-monad-dnsvc?file=/pages/index.js)
### ClientOnly
A component that prevents server side rendering of its' children.
```jsx
// 'Client Only!' will only be rendered client side
Client Only!
```
`ClientOnly` optionally accepts a `placeholder` prop which will be rendered in place of the children on the server.
```jsx
// 'Loading...' will be rendered on the server, and then 'Client Only!'
// will be rendered when JS boots on the client
Loading...}>
Client Only!
```
### useJSEnabled
Returns true when JS has booted on the client. This can be used to implement progressive enhancement.
```jsx
const jsEnabled = useJSEnabled();
return ;
```
Above, the button will initially render in a disabled state, and when JS boots the button will become interactive.
## Installation & Usage 📦
1. Add this package to your project:
- `yarn add react-isomorphic-utils`
Just trying things out or want to skip the build step? Use the unpkg URL:
```
```
## Contributing 👫
PR's and issues welcomed! For more guidance check out [CONTRIBUTING.md](https://github.com/tatethurston/react-isomorphic-utils/blob/master/CONTRIBUTING.md)
## Licensing 📃
See the project's [MIT License](https://github.com/tatethurston/react-isomorphic-utils/blob/master/LICENSE).
## What is this? 🧐
A collection of React hooks and components for writing isomorphic applications.
## Examples 🚀
[Try the CodeSandbox Example!](https://codesandbox.io/s/silly-monad-dnsvc?file=/pages/index.js)
### ClientOnly
A component that prevents server side rendering of its' children.
```jsx
// 'Client Only!' will only be rendered client side