Alepha React Head

Manages the document for SEO and metadata.

Installation

This package is part of the Alepha framework and can be installed via the all-in-one package:

npm install alepha

Module

Fill <head> server & client side.

This module can be imported and used as follows:

import { Alepha, run } from "alepha";
import { AlephaReactHead } from "alepha/react/head";

const alepha = Alepha.create()
  .with(AlephaReactHead);

run(alepha);

API Reference

Descriptors

Descriptors are functions that define and configure various aspects of your application. They follow the convention of starting with $ and return configured descriptor instances.

For more details, see the Descriptors documentation.

$head()

Set global <head> options for the application.

Hooks

Hooks provide a way to tap into various lifecycle events and extend functionality. They follow the convention of starting with use and return configured hook instances.

useHead()

const App = () => {
  const [head, setHead] = useHead({
    // will set the document title on the first render
    title: "My App",
  });

  return (
    // This will update the document title when the button is clicked
    <button onClick={() => setHead({ title: "Change Title" })}>
      Change Title {head.title}
    </button>
  );
}

Edit page on GitHub

Table of contents