JSPM

only-on-client

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q27838F
  • License ISC

Ensure client side rendering of a component

Package Exports

  • only-on-client
  • only-on-client/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (only-on-client) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

only-on-client

The only-on-client package provides a React component that ensures its children are only rendered on the client side. This is useful for components that rely on browser-specific APIs and should not be rendered during server-side rendering.

It renders its children only when executed in a client environment (e.g., a web browser), and does not render anything when executed in a server environment (e.g., Node.js).

Installation

You can install via npm:

npm install only-on-client

Or via yarn:

yarn add only-on-client

Usage

import React from "react";
import OnlyOnClient from "only-on-client";

export const App = () => (
  <div>
    <h1>My App</h1>
    <OnlyOnClient>
      <div>This content is rendered only on the client side.</div>
    </OnlyOnClient>
  </div>
);

Props

It takes a single prop named children, which is of type ReactNode. You dont have to pass any prop explicitely.

Examples

Render a component only on the client side:

<OnlyOnClient>
  <div>This content is rendered only on the client side.</div>
</OnlyOnClient>

Development

If you want to contribute to the development of OnlyOnClient, you can clone the GitHub repository:

git clone https://github.com/ajitesh13/only-on-client.git

License

This project is licensed under the MIT License - see the LICENSE file for details.

Issues

If you encounter any issues or have suggestions for improvements, please open an issue on GitHub.