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>;
};