react-simple-animation-viewer

The very simple animation viewer in React.

Installation

npm install react-simple-animation-viewer

Example

All you have to do is enclose <AnimationViewProvider>, <AnimationViews>, <AnimationView>!

import React from 'react';
import {
  AnimationViewProvider,
  AnimationViews,
  AnimationView,
  useAnimationViewer,
} from 'react-simple-animation-viewer'

const Component = (props) => {
  return (
    <AnimationViewProvider>
      <AnimationViews {...props} value="sample">
        <AnimationView
          isRoot
          value={'top'}
          containerStyle={{
            width: '100vw',
            height: '100vh',
            backgroundColor: 'green',
          }}
        >
          <Top />
        </AnimationView>
        <AnimationView
          value={'second'}
          containerStyle={{
            width: '100vw',
            height: '100vh',
            backgroundColor: 'blue',
          }}
        >
          <Second />
        </AnimationView>
        <AnimationView
          value={'third'}
          containerStyle={{
            width: '100vw',
            height: '100vh',
            backgroundColor: 'red',
          }}
        >
          <Third />
        </AnimationView>
        <AnimationView
          value={'fourth'}
          containerStyle={{
            width: '100vw',
            height: '100vh',
            backgroundColor: 'black',
          }}
        >
          <Fourth />
        </AnimationView>
      </AnimationViews>
    </AnimationViewProvider>
  );
};

const Top = () => {
  const { forwardView } = useAnimationViewer();
  return (
    <Button primary onClick={() => forwardView('second')}>
      second
    </Button>
  );
};
const Second = () => {
  const { forwardView, backwardView } = useAnimationViewer();
  return (
    <>
      <Button primary onClick={() => backwardView()}>
        back
      </Button>
      <Button primary onClick={() => forwardView('third')}>
        third
      </Button>
    </>
  );
};
const Third = () => {
  const { forwardView, backwardView } = useAnimationViewer();
  return (
    <>
      <div style={{ height: '50vh' }} />
      <Button primary onClick={() => backwardView()}>
        back
      </Button>
      <Button primary onClick={() => forwardView('fourth')}>
        fourth
      </Button>
      <div style={{ height: '100vh' }} />
    </>
  );
};
const Fourth = () => {
  const { backwardView } = useAnimationViewer();
  return (
    <Button primary onClick={() => backwardView()}>
      back
    </Button>
  );
};

Props

AnimationViews

* is required.

| props | type | description | | :------------------- | :------------------------------------------------------------------------------------------ | :----------------------------------------------------- | | *children | Array<React.ReactElement<AnimationViewProps>> or React.ReactElement<AnimationViewProps> | The Animation View component(s) | | *value | string | The unique value to manage the another animation views | | inContainerStyle | React.CSSProperties | The style to be applied to the inComponent | | outContainerStyle | React.CSSProperties | The style to be applied to the outComponent | | timeout | number | The time for animation (ms). Default to 300 | | onChangeViewValues | (_value: string \| null) => void | The event handler on changing the view |

AnimationView

* is required.

| props | type | description | | :--------------- | :-------------------- | :---------------------------------------------------------------------------------- | | *children | React.ReactNode | The component to be shown | | *value | string | The unique value to manage the view | | isRoot | boolean | Whether to be root (top) view or not. This parameter must be true in only one view. | | containerStyle | React.CSSProperties | The style of div |

useAnimationViewer

Note: You should enclose <AnimationViewProvider> at the top components to use useAnimationViewer

| props | type | description | | :------------- | :-------------------------------- | :------------------------------------------------ | | viewValue | string \| null | The current view's value | | forwardView | (_newViewValue: string) => void | The function to forward (left to right) the view | | backwardView | () => void | The function to backward (right to left) the view | | closeView | () => void | The function to close the view |