lib components / Context

Using Fancy Context

This guide describes what Fancy Context is and how to use it.

#Intro

FancyLib provides a react context that must be wrapped at an outer level of where fancy components are used. For now the context is used to identify the chosen language for translations. The context also inserts an element that applies the global styles from FancyLib to all decendendant. The global styles are required to apply things like fonts to fancy and non-fancy components inside a fancy application.

import React from "react";
import { FancyContextProvider } from "@siteimprove/fancylib";
import "@siteimprove/fancylib/global.css"; // Global styles for general styling

export const App: React.FC = () => {
	return (
		<div className="fancy-root">
			<FancyContextProvider lang="en-US" formattingLang="en-US">{"..."}</FancyContextProvider>
		</div>
	);
};

Alternatively, you can use the FancyRoot component which will apply the global styles (i.e. the .fancy-root class) for you.

import React from "react";
import { FancyRoot } from "@siteimprove/fancylib";
import "@siteimprove/fancylib/global.css"; // Global styles for general styling

export const App: React.FC = () => {
	return <FancyRoot lang="en-US" formattingLang="en-US">{"..."}</FancyRoot>;
};

#Translations

Translations that are frequently used in components are available in the fancy context to keep the language consistent and avoid having many props only to provide text.

#Using translations

To use translations from the fancy context, call the useTranslations method and use it as shown below:

function Component(): JSX.Element {
	// get i18n function from the context and assign it to a variable
	const i18n = useTranslations();
	return (
		<Paragraph>
			{/* use a translation that's registered in the context */}
			{i18n.loading}
		</Paragraph>
	);
}

#Static mode

Interactive components can have an alternative appearance and behavior in a static setting that is used in places like the reports. If that is the case, you can check for staticMode using the method useStaticMode and conditionally render either the regular or the static version of the component.