Reduced Motion

Provider component which aggregates the main Clay, Icon, and Modal.

installyarn add @clayui/core
versionNPM Version
useimport {Provider} from '@clayui/core';

Introduction

Setting the motion reduction of animations can be done in two different ways in Clay, transitions that are done purely in CSS can use the c-prefers-reduced-motion class and transitions that are made with JS are defined using Clay’s Provider component.

JS

To remove transition from components in React, you need to declare the Provider component at the root of your application and set the reducedMotion property to whichever option you want.

  • user : Respect user’s device setting.
  • always : Enforce reduced motion.
  • never : Don’t reduce motion.
<Provider spritemap={spritemap} reducedMotion="user">
	<App />
</Provider>;

CSS

The class c-prefers-reduced-motion removes transitions from child elements. It allows the site creator to remove any CSS transition in a specific section or on the whole page without having to depend on the operating system’s non-essential motion setting.

It also removes scroll-behavior: smooth if it is enabled. You can place c-prefers-reduced-motion on whatever element has the CSS property scroll-behavior: smooth to remove it. If this class is placed on the html element, it will remove all CSS transitions for the page.

API Reference

Provider

({ children, reducedMotion, spritemap, storageMaxSize, theme, ...otherProps }: IProviderProps) => JSX.Element
Parameters
Properties

children *

React.ReactNode

The content of the Provider.

reducedMotion

"user" | "always" | "never" | undefined= "user"

Defines the transition for the entire tree.

spritemap *

string

Path to the location of the spritemap resource.

storageMaxSize

number | undefined= 20

Set the amount of items that can be cached, set to zero will be treated as infinite, be aware to set an ideal size to offer a positive experience for your user but not use a large amount of memory.

theme

string | undefined

The theme corresponds to a CSS class to scope the application.

Returns
Element

useProvider

() => IProviderContext
Returns
IProviderContext