Docusaurus-theme-frontmatter - Docusaurus theme to expose front matter through a component hook

Overview

docusaurus-theme-frontmatter

This package enhances the Docusaurus classic theme by exposing the docs, blog, and pages front matter to the following components and their children:

Furthermore, this allows you to define and access custom front matter.

Release Version License

Install

yarn add docusaurus-theme-frontmatter

Then, include the plugin in your docusaurus.config.js file.

// docusaurus.config.js
module.exports = {
  ...
+ themes: ['docusaurus-theme-frontmatter'],
  ...
}

TypeScript support

To enable TypeScript support, the TypeScript configuration should be updated to add the docusaurus-theme-frontmatter type definitions. This can be done in the tsconfig.json file:

{
  "extends": "@tsconfig/docusaurus/tsconfig.json",
  "compilerOptions": {
    ...
+    "types": ["docusaurus-theme-frontmatter"]
  }
}

How to use

The useFrontMatter() hook is made available to any of your components through the @theme/useFrontMatter import. For example, you might have a component that creates a gallery of images.

---
title: Miniature fairy doors of NYC
hide_table_of_contents: true
gallery:
  - /images/117-first-avenue.jpg
  - /images/lower-east-side.jpg
  - /images/my-guinness.jpg
  - /images/hundred-years.jpg
---
import Galley from '@theme/Galley';

<Galley />
import React from 'react';
import ImageGallery from 'react-image-gallery';
import useFrontMatter from '@theme/useFrontMatter';

export default function GalleyComponent () {
  const { gallery } = useFrontMatter();

  if (Array.isArray(gallery)) {
    const images = gallery.map((image) => ({
      original: image
    }));

    return <ImageGallery items={images} />;
  }

  return null;
}

Public API

useFrontMatter<T extends FrontMatter>()

Returns the front matter for the current context.

import useFrontMatter from '@theme/useFrontMatter';

interface CustomFrontMatter {
  gallery?: string[];
}

const MyComponent = () => {
  const { gallery } = useFrontMatter<CustomFrontMatter>();
  return (<... />);
}

Context

The current front matter context.

Generally, this is something to be left alone and operates behind the scenes. This is how it is used to enhance DocItem scaffolding the hook:

import { Context } from '@theme/useFrontMatter';
import DocItem from '@theme-init/DocItem';
import React from 'react';

export default (props) => <Context.Provider value={props.content.frontMatter}>
	<DocItem {...props} />
</Context.Provider>;

FrontMatter, DocItemFrontMatter, BlogPostItemFrontMatter, MDXPageFrontMatter

These types are provided to assist in describing the values returned by the useFrontMatter() hook.

import useFrontMatter from '@theme/useFrontMatter';
import type { DocItemFrontMatter } from '@theme/useFrontMatter';

const MyComponent = () => {
  const { id, title, keywords } = useFrontMatter<DocItemFrontMatter>();
  return (<... />);
}
Releases(v1.1.0)
Owner
trent
trent
a redux middleware to automatically generate tests for reducers through ui interaction

Redux Test Recorder NOTE YOUR STATE TREE MUST BE SERIALIZABLE Redux test recorder is a redux middleware for automatically generating tests for your re

Conor Hastings 492 Jan 12, 2022
ESLint plugin for react-hook-form

eslint-plugin-react-hook-form react-hook-form is an awsome library which provide a neat solution for building forms. However, there are many rules for

Chuan-Tse Kao 21 Jan 17, 2022
🛹 React Web3 wallet hook for the Onboard.js library.

useOnboard() A React Web3 wallet hook for Onboard.js library. Features Fully configurable as much as Onboard itself selectWallet and disconnectWallet

v 1 r t l 40 Jan 18, 2022
Simple hook to truncate items in the given list

useTagTruncator Installation yarn add react-use-tag-truncator npm install react-use-tag-truncator TODO Minor stuff need to be done in project: Fix r

Roman Kovtun 4 Jul 19, 2021
Simple useGlobalState hook for React!

useGlobalState Simple useGlobalState hook for React! Do you need your data shared across other components, and you simply don't want to pass props all

Pavel Uvarov 13 Dec 29, 2021
transform react class component to function component

react-class-to-fc ⭐ 特性 将react class组件转化为react 函数组件 ?? 安装 npm i react-class-to-fc -g ?? 使用 ctfc -i react-demo.js -o fc.js 就会将 react-demo.js文件中的class组

一口獠牙的小甜甜 48 Nov 22, 2021
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Jan 16, 2022
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.3k Jan 21, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 68.1k Jan 14, 2022
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.2k Jan 15, 2022
React JSON inspector component

React JSON Inspector Component React-based JSON inspector that features tree expansion and fast search. Live demo Installation npm install react-json-

Aziz Yuldoshev 284 Jan 11, 2022
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Styleguidist 10.2k Jan 14, 2022
A mobile-first React prototyping tool with React-Bootstrap component integration

A mobile-first React prototyping tool with React-Bootstrap component integration

OSLabs Beta 48 Jan 10, 2022
Isolated React component development environment with a living style guide

Isolated React component development environment with a living style guide React Styleguidist is a component development environment with hot reloaded

Vladimir Bezrukov 1 Oct 28, 2021
Prevent React component subtrees from rendering

React Freeze Prevent React component subtrees from rendering. What is this? ?? This library allows for freezing renders of the parts of the React comp

Software Mansion – Labs 847 Jan 15, 2022
Component to build simple, flexible, and accessible toggle components

react-toggled ⚛️ Component to build simple, flexible, and accessible toggle components The problem You want a toggle component that's simple and gives

Kent C. Dodds 459 Dec 4, 2021
React component wrap for SimpleMDE Markdown Editor(v1.x)

react-simplemde-v1 React.js(v16.x+) component wrap for SimpleMDE Markdown Editor(v1.x+) Installation $ npm install --save simplemde react-simplemde-v1

Zhentian Lu 8 Dec 6, 2021
A flexible, responsive, and easy-to-use crossword component for React apps.

Install npm install --save @jaredreisinger/react-crossword # or # yarn add @jaredreisinger/react-crossword Usage See also the styleguidist docs for

Jared Reisinger 77 Jan 6, 2022
A component simplifies Goftino widget usage in your React application

@mohsen007/react-goftino A component simplifies Goftino widget usage in your React application Introduction This component applies to Goftino Web Widg

Mohsen Lotfi 4 Jan 3, 2022