React-client-hints NPM

react-client-hints

React Client Hints Hooks, Component, and Provider. SSR-ready and fully unit-tested.

Requirement

React 16.8.0

Features

Provide simple API for latest Client Hints feature
Using new React Context API
SSR-ready
Fully unit-tested

Try it live at StackBlitz

import React, { Component } from 'react';
import { render } from 'react-dom';
import { ClientHintsProvider, useClientHints } from 'react-client-hints';

const Hello = () => {
  const ch = useClientHints();
  return <div>Platform: {ch && ch.platform}</div>;
};

const App = () => {
  return (
    <ClientHintsProvider>
      <Hello />
    </ClientHintsProvider>
  );
};

render(<App />, document.getElementById('root'));

// SSR with compatible header object
const el = (
  <ClientHintsProvider header={request.headers}>
    <ClientHints>{ch => ch.platform}</ClientHints>
  </ClientHintsProvider>
);

ReactDOMServer.renderToString(el);