1.0.5 • Published 1 year ago
react-simple-animation-viewer v1.0.5
react-simple-animation-viewer
The very simple animation viewer in React.
Installation
npm install react-simple-animation-viewerExample
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 |