# react-no-ssr

> React component to wrap non SSR components.

Latest version **1.1.0** (published 2016-04-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-no-ssr
pnpm add react-no-ssr
yarn add react-no-ssr
bun add react-no-ssr
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-04-09 |
| First published | 2016-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-no-ssr) |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 458 |
| Maintainers | arunoda |

## Links

- npm: https://www.npmjs.com/package/react-no-ssr
- Repository: https://github.com/kadirahq/react-no-ssr
- Homepage: https://github.com/kadirahq/react-no-ssr#readme
- Issues: https://github.com/kadirahq/react-no-ssr/issues
- npm.io page: https://npm.io/package/react-no-ssr

## Dependencies (1)

- [babel-runtime](https://npm.io/package/babel-runtime.md) 6.x.x

## Recent versions

- 1.1.0 (latest) — 2016-04-09
- 1.0.1 — 2016-02-19
- 1.0.0 — 2016-02-19

## README

# react-no-ssr

**React component to wrap non SSR components.**

When working with Server Side Rendering(SSR) enabled apps, you have to deal with client only components.
This wrapper makes it simple to work with those components.

### Installation

```
npm i --save react-no-ssr
```

### Usage

Let's say `Comments` is our **client only** component. Now we need to render it only on the client. Here's how we do it.

```js
import React from 'react';
import NoSSR from 'react-no-ssr';
import Comments from './comments.jsx';

const MyPage = () => (
  <div>
    <h2>My Blog Post</h2>
    <hr />
    <NoSSR>
      <Comments />
    </NoSSR>
  </div>
);
```

Then, `<Comments />` component is only rendered on the client just after it's mounted. It doesn't render when the SSRed HTML is booting up in the client. So, there won't be any React warning messages on the console.

### Render a Component on SSR

Usually, we need to add some loading text or similar until `<Comments />` component starts to render. Here's how to do it.

```js
const Loading = () => (<div>Loading...</div>);
const MyPage = () => (
  <div>
    ....
    <NoSSR onSSR={<Loading />}>
      <Comments />
    </NoSSR>
  </div>
);
```

Then `<Loading />` component will be rendered until `<Comments />` component is rendered to the DOM.

---
_Source: https://npm.io/package/react-no-ssr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._