useReducedMotion

React

useReducedMotion gjør at man kan sjekke om brukeren har satt preferedReducedMotion, dermed kan vi unngå å gjøre js-animasjoner, ikke bare css-animasjoner.

Bruk

Denne baserer seg på en event listener, så som andre hooks med eventlyttere bør denne implementeres så høyt opp i applikasjonen din som nødvendig for å unngå å lage for mange listeners. Bruk gjerne en React Context i stedet for å strø flere av denne komponenten rundt der man gjør JS-animasjoner. Les om reduced motion på mdn.

Husk at reduced motion ikke betyr at all bevegelse må bort, men det skal være enkle, forklarende bevelgelser. Unngå store og kompliserte bevelgelser. Unngå også bevelgelser som ikke er initiert av brukeren. Parallax-effekter skal også skrus av. Ta en titt på forsiden og bildesiden

Din dings har redusert bevegelse AV

React API

Her finner du en oversikt over props på komponentene i pakken.

Prop	Standardverdi	Påkrevd	Type
`ref`	ingen	Påkrevd	`RefObject<ValueOf<HTMLElementTagNameMap>>`
`timeout`	`0`	Ikke påkrevd	`number \| undefined`
`autoScroll`	`true`	Ikke påkrevd	`boolean \| undefined`
`options`	`{ behavior: "smooth" }`	Ikke påkrevd	`ScrollIntoViewOptions \| undefined`

Prop	Beskrivelse	Standardverdi	Påkrevd	Type
`lowQualitySrc`		ingen	Påkrevd	`string`
`highQualitySrc`		ingen	Påkrevd	`string`

Arvede props

Prop	Beskrivelse	Standardverdi	Påkrevd	Type
`toString`	Returns a string representation of an object. @param radix Specifies a radix for converting numeric values to strings. This value is only used for numbers.	ingen	Ikke påkrevd	`(radix?: number \| undefined) => string`
`toFixed`	Returns a string representing a number in fixed-point notation. @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.	ingen	Påkrevd	`(fractionDigits?: number \| undefined) => string`
`toExponential`	Returns a string containing a number represented in exponential notation. @param fractionDigits Number of digits after the decimal point. Must be in the range 0 - 20, inclusive.	ingen	Påkrevd	`(fractionDigits?: number \| undefined) => string`
`toPrecision`	Returns a string containing a number represented either in exponential or fixed-point notation with a specified number of digits. @param precision Number of significant digits. Must be in the range 1 - 21, inclusive.	ingen	Påkrevd	`(precision?: number \| undefined) => string`
`valueOf`	Returns the primitive value of the specified object.	ingen	Ikke påkrevd	`() => number`
`toLocaleString`	Converts a number to a string by using the current or specified locale. @param locales A locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. @param options An object that contains one or more properties that specify comparison options.	ingen	Ikke påkrevd	`(locales?: string \| string[] \| undefined, options?: NumberFormatOptions \| undefined) => string`