Skip to main content

themed()

Deprecated

The themed() function, and the old way to implement themeable components are deprecated in favour of the new useTheme() hook in the library version v1.10.0. For now, themed() still works, but it will be removed in future library versions. For migration instructions see useTheme() documentation.

Original Documentation​

import themed from '@dr.pogodin/react-themes';

// Recommended signature:
function themed<ComponentProps extends ThemeableComponentProps>(
  component: ComponentType<ComponentProps>,
  componentName: string,
  defaultTheme: ComponentProps['theme'],
  options?: ThemedOptions<ComponentProps>,
): ThemedComponent<ComponentProps>;
Full & decorator signatures of themed()

The full signature of themed() function is the following (essentially, it allows to skip defaultTheme argument altogether, and to provide options in its position). It is provided mostly for backward compatibility, as in practice defaultTheme argument is always used.

function themed<ComponentProps extends ThemeableComponentProps>(
  component: ComponentType<ComponentProps>,
  componentName: string,

  defaultThemeOrOptions?: ComponentProps['theme']
    | ThemedOptions<ComponentProps>,

  options?: ThemedOptions<ComponentProps>,
): ThemedComponent<ComponentProps>;

Also for backward compatibility, this variant of themed() function exists, and allows to use it as a (legacy?) decorator. It is not recommended, as Decorators in JavaScript have a difficult history, with different variants implemented by different tools (Babel), and language flavours (TypeScript) at different times, and because decorators do not provide any unqiue possibilities that can't be achived without them. If ever they finally become a standard part of JS/TS eco-system, most probably their support by this library will have to be revised.

function themed<ComponentProps extends ThemeableComponentProps>(
  componentName: string,

  defaultThemeOrOptions?: ComponentProps['theme']
    | ThemedOptions<ComponentProps>,

  options?: ThemedOptions<ComponentProps>,
): ThemedComponentFactory<ComponentProps>;

Registers a themed component under the given name, and with an optional default theme.

themed() can be used as a decorator, or in the following (recommended) way:

import themed from '@dr.pogodin/react-themes';
import defaultTheme from './default.scss';

function Component() { ... }

export themed(Component, 'ThemedComponent', defaultTheme);

When rendered, your component will receive the composed theme via its theme prop. You will just need to pass the values from theme into the className attributes of your component elements, as shown in the Getting Started tutorial.

Generic Parameter​

Arguments​

  • component — ComponentType[ComponentProps] — The base component to be themed, its props must compty with the ThemeableComponentProps interface.

  • componentName — string — Themed component name, which should be used to provide its context theme via ThemeProvider.

  • defaultTheme — ComponentProps['theme'] — Default theme, in the form of theme key to CSS classname mapping.

Optional

  • options — ThemedOptions — Additional options accepted by the function.

Returns​

The recommended signature of this function returns themed component:

The decorator variant returns instead the component factory, which should be called right away with a single argument — the base component to wrap: