Use Metadata

A (simple) zero-dependency way to set the title, description, and image metadata in your react application.

Simply import the hook and pass in your title, description, and or image.

The component will automatically update and rerender if you pass in a variable that gets statefully updated.

View on NPM

import React, { useState } from 'react';
import { useMetadata } from 'use-metadata';

function App() {
  const [title, setTitle] = useState('something');
  const description = 'very simply to use';
  const image =
    'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80';

  useMetadata({ title, description, image });

  return (
    <div>
      <button type="button" onClick={() => setTitle('something else')}>
        Click Me
      </button>
    </div>
  );
}