TextSize()

Home > @backstage/plugin-techdocs-module-addons-contrib > TextSize

This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons.

Signature:

TextSize: () => JSX.Element | null

Returns:

JSX.Element | null

Remarks

The default value for the font size is 100% of the HTML font size, if the theme does not have a htmlFontSize in its typography object, the addon will assume 16px as 100%, and remember, this setting is kept in the browser local storage.

Example

Here's a simple example:

import {
  DefaultTechDocsHome,
  TechDocsIndexPage,
  TechDocsReaderPage,
} from '@backstage/plugin-techdocs';
import { TechDocsAddons } from '@backstage/plugin-techdocs-react';
import { TextSize } from '@backstage/plugin-techdocs-module-addons-contrib';


const AppRoutes = () => {
  <FlatRoutes>
    // other plugin routes
    <Route path="/docs" element={<TechDocsIndexPage />}>
      <DefaultTechDocsHome />
    </Route>
    <Route
      path="/docs/:namespace/:kind/:name/*"
      element={<TechDocsReaderPage />}
    >
      <TechDocsAddons>
        <TextSize />
      </TechDocsAddons>
    </Route>
  </FlatRoutes>;
};