# AnimationToggle

## Examples


### Controlling animation via a provider

Shows how to control animation using an AnimationToggleProvider. This can be used to disable animation for most components included in this library.

```typescript
import React, { Component } from 'react';

import { AnimationToggleProvider } from '@splunk/react-ui/AnimationToggle';
import Button from '@splunk/react-ui/Button';
import Switch from '@splunk/react-ui/Switch';
import TransitionOpen from '@splunk/react-ui/TransitionOpen';


class Provider extends Component<object, { animatedTransitions: boolean; open: boolean }> {
    constructor(props: object) {
        super(props);
        this.state = {
            open: false,
            animatedTransitions: false,
        };
    }

    handleButtonClick = () => {
        this.setState((state) => ({ open: !state.open }));
    };

    handleSwitchClick = () => {
        this.setState((state) => ({ animatedTransitions: !state.animatedTransitions }));
    };

    render() {
        const style: React.CSSProperties = {
            border: '1px solid black',
            marginTop: 10,
            textAlign: 'center',
            width: 150,
        };
        return (
            <div>
                <Switch onClick={this.handleSwitchClick} selected={this.state.animatedTransitions}>
                    Animation enabled
                </Switch>
                <AnimationToggleProvider enabled={this.state.animatedTransitions}>
                    <Button onClick={this.handleButtonClick}>Click me!</Button>
                    <TransitionOpen animation="expandHeight" open={this.state.open}>
                        <div style={style}>
                            <p>Hello world</p>
                            <p>Hello world</p>
                            <p>Hello world</p>
                            <p>Hello world</p>
                            <p>Hello world</p>
                        </div>
                    </TransitionOpen>
                </AnimationToggleProvider>
            </div>
        );
    }
}

export default Provider;
```



### Offering animation control with a hook

Shows how to use the useAnimationToggle hook to render different content based on current animation settings.

```typescript
import React, { useState } from 'react';

import { AnimationToggleProvider, useAnimationToggle } from '@splunk/react-ui/AnimationToggle';
import P from '@splunk/react-ui/Paragraph';
import Switch from '@splunk/react-ui/Switch';


function Content() {
    const animationToggle = useAnimationToggle();
    const MessageComponent = animationToggle === 'on' ? 'b' : 'span';
    const message = animationToggle === 'on' ? 'Enabled' : 'Disabled';
    return <MessageComponent>{message}</MessageComponent>;
}

function ToggleHook() {
    const [animatedTransitions, setAnimatedTransitions] = useState(false);
    const handleSwitchClick = () => {
        setAnimatedTransitions((state) => !state);
    };

    return (
        <P>
            <Switch onClick={handleSwitchClick} selected={animatedTransitions}>
                Animation enabled
            </Switch>
            <AnimationToggleProvider enabled={animatedTransitions}>
                <Content />
            </AnimationToggleProvider>
        </P>
    );
}

export default ToggleHook;
```



### Offering animation control with a component

Shows how to use the Animation Toggle component to render different content based on current animation settings.

```typescript
import React, { Component } from 'react';

import AnimationToggle, { AnimationToggleProvider } from '@splunk/react-ui/AnimationToggle';
import P from '@splunk/react-ui/Paragraph';
import Switch from '@splunk/react-ui/Switch';


class ToggleComponent extends Component<object, { animatedTransitions: boolean }> {
    constructor(props: object) {
        super(props);
        this.state = {
            animatedTransitions: false,
        };
    }

    handleSwitchClick = () => {
        this.setState((state) => ({ animatedTransitions: !state.animatedTransitions }));
    };

    render() {
        return (
            <P>
                <Switch onClick={this.handleSwitchClick} selected={this.state.animatedTransitions}>
                    Animation enabled
                </Switch>
                <AnimationToggleProvider enabled={this.state.animatedTransitions}>
                    <AnimationToggle on={<b>Enabled</b>} off={<span>Disabled</span>} />
                </AnimationToggleProvider>
            </P>
        );
    }
}

export default ToggleComponent;
```



### Support reduced motion with a hook

Shows how to use the useAnimationToggle hook to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled useAnimationToggle returns 'off'.

```typescript
import React from 'react';

import { useAnimationToggle } from '@splunk/react-ui/AnimationToggle';
import List from '@splunk/react-ui/List';
import P from '@splunk/react-ui/Paragraph';


const ReducedMotionHook = () => {
    const animationToggle = useAnimationToggle();
    // TODO: Once Prose component is finished, use Prose to add left padding and margin back to List (SUI-5554)
    return (
        <article>
            <P>To reduce animation on macOS:</P>
            <List ordered>
                <List.Item>Go to &quot;System Preferences&quot;</List.Item>
                <List.Item>Choose &quot;Accessibility&quot;</List.Item>
                <List.Item>Select &quot;Display&quot;</List.Item>
                <List.Item>Check &quot;Reduce motion&quot;</List.Item>
            </List>
            <P>
                Animation currently:{' '}
                <b>
                    {animationToggle === 'on' && 'On'}
                    {animationToggle === 'off' && 'Off'}
                    {animationToggle === 'reduced' && 'Reduced'}
                </b>
            </P>
        </article>
    );
};

export default ReducedMotionHook;
```



### Support reduced motion with a component

Shows how to use the Animation Toggle component to offer an alternative when the user prefers reduced motion. If reduced motion is preferred but animations are disabled or no reduced motion alternative is set, Animation Toggle considers animations to be disabled.

```typescript
import React from 'react';

import AnimationToggle from '@splunk/react-ui/AnimationToggle';
import P from '@splunk/react-ui/Paragraph';


const ReducedMotionComponent = () => (
    <P>
        Animation currently:{' '}
        <AnimationToggle on={<b>On</b>} off={<b>Off</b>} reduced={<b>Reduced</b>} />
    </P>
);

export default ReducedMotionComponent;
```




## API

import React from 'react';

import ComponentAPI from '@splunk/react-docs/ComponentAPI';
import UtilAPI from '@splunk/react-docs/UtilAPI';

import animationToggleContextDocs from '!!@splunk/jsdoc-loader!@splunk/react-ui/AnimationToggle/AnimationToggleContext';
import useAnimationToggleDocs from '!!@splunk/jsdoc-loader!@splunk/react-ui/AnimationToggle/useAnimationToggle';
import allAnimationToggleDocs from '@splunk/react-ui/AnimationToggle/AnimationToggle?parseDocs';
import allAnimationToggleProviderDocs from '@splunk/react-ui/AnimationToggle/AnimationToggleProvider?parseDocs';

const animationToggleDocs = allAnimationToggleDocs.find(
    (doc) => doc.displayName === 'AnimationToggle'
);
const animationToggleProviderDocs = allAnimationToggleProviderDocs.find(
    (doc) => doc.displayName === 'AnimationToggleProvider'
);

function DevelopSection() {
    return [
        <ComponentAPI
            title="AnimationToggleProvider"
            key="AnimationToggleProvider"
            docs={animationToggleProviderDocs}
        />,
        <ComponentAPI title="AnimationToggle" key="AnimationToggle" docs={animationToggleDocs} />,
        <UtilAPI key="UseAnimationToggleDocs" docs={useAnimationToggleDocs} />,
        <UtilAPI key="AnimationToggleContextDocs" docs={animationToggleContextDocs} />,
    ];
}

export default DevelopSection;