# gatsby-plugin-check-ssr

> Provides react components that render only inside/outside server-side-rendering.

Latest version **1.0.2** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-check-ssr
pnpm add gatsby-plugin-check-ssr
yarn add gatsby-plugin-check-ssr
bun add gatsby-plugin-check-ssr
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-10-01 |
| First published | 2019-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nima Anari |
| Maintainers | nimaanari |
| Keywords | gatsby, plugin, react, server-side-rendering |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-check-ssr
- Repository: https://github.com/nimaanari/gatsby-plugin-check-ssr
- Homepage: https://github.com/nimaanari/gatsby-plugin-check-ssr#readme
- Issues: https://github.com/nimaanari/gatsby-plugin-check-ssr/issues
- npm.io page: https://npm.io/package/gatsby-plugin-check-ssr

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^16.9.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.6.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2019-10-01
- 1.0.1 — 2019-09-21
- 1.0.0 — 2019-09-17

## README

# Gatsby-Plugin-Check-Ssr

Provides react components that render only inside/outside server-side-rendering.

## Installation

1. Add gatsby-plugin-check-ssr to your Gatsby project by executing `npm install --save gatsby-plugin-check-ssr`.
2. Modify your `gatsby-config.js` and add this plugin:
```js
// Inside gatsby-config.js
plugins: [
    `gatsby-plugin-check-ssr`
]
```

## Usage

You can wrap components in `<InsideSSR />` or `<OutsideSSR />`.
```js
// This file could be under src/pages/ for example.
import { InsideSSR, OutsideSSR } from 'gatsby-plugin-check-ssr';

export default () => (
    <div>
        <InsideSSR>We are inside SSR</InsideSSR>
        <OutsideSSR>We are in the browser</OutsideSSR>
    </div>
);
```

Alternatively you can use the default export which is a React context.

```js
// This file could be under src/pages/ for example.
import SSRContext from 'gatsby-plugin-check-ssr';

export default () => {
    const inSSR = useContext(SSRContext);
    if (inSSR){
        return <div>Inside SSR</div>;
    } else {
        return <div>Outside SSR</div>;
    }
};
```

## License

The MIT license.

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