Higher order component of [`react-transition-group`](https://reactcommunity.org/react-transition-group/) to enable transtion for react and react-native.
npm install with-transitionHigher order component of react-transition-group
to enable transtion for react and react-native.
https://yusukeshibata.github.io/with-transition/
Many transition presets are prepared.
* slideup_slidedown
* slideleft_slideright
* ...and more
``js
import withTransition from 'with-transition'
const SlideupSomeComponent = withTransition({
// transition is required
transition: 'slideleft_slideright',
// any other optional configs will be passed into react-transition-group props
// https://reactcommunity.org/react-transition-group/#Transition-prop-children
appear: true
unmountOnExit: true,
mountOnEnter: false
})(SomeComponent)
render() {
const { flag } = this.state
return (
{/*
* in prop will be passed to internal react-transition-group container,
* and update component's mounted/unmounted state.
*/}
)
}
`
`js`
withTransition({
transition: {
duration: 250,
timingFunction: 'ease-in-out',
properties: ['opacity', 'transform'],
default: {
transform: 'translate(0,50px)',
opacity: 0
},
entering: {
transform: 'translate(0,0)',
opacity: 1
},
entered: {
transform: 'translate(0,0)',
opacity: 1
},
exiting: {
transform: 'translate(0,-50px)',
opacity: 0
},
exited: {
transform: 'translate(0,-50px)',
opacity: 0
}
}
})
withTransition's config object will be passed into react-transition-group's Transition component. And props on Example will be passed into View, Transition
(See example below)
so if you want to set props to component, do as below:
`js`
{
// (props) => {}
onEnter: props => props.onEnter,
mountOnEnter: props => props.mountOnEnter
}
Example:
`js
const Example = withTransition({
transition: 'scaleup_scaledown',
// set value as (props) => {}
onEnter: props => props.onEnter,
mountOnEnter: props => props.mountOnEnter
})(View)
class SomeComponent extends Component {
onEnter() {
// ...
}
render() {
return (
{/.../}
)
}
}
`
`jstransition
const Example = withTransition({
// Example's prop.type will be set as value.
transition: props => props.type
})(View)
class SomeComponent extends Component {
render() {
const type = 'slideup_slideup'
return (
}
}
``
Yusuke Shibata
MIT