with-transition

Higher order component of
react-transition-group
to enable transtion for react and react-native.

Demo

https://yusukeshibata.github.io/with-transition/

Usage with presets

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.
*/}


)
}


`

Or you can specify custom transition like:

`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
}
}
})
`

$3

withTransition's config object will be passed into react-transition-group's Transition component. And props on Example will be passed into View,
(See example below)
so if you want to set props to Transition 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 (

{/.../}

)
}
}
`

$3

`js
const Example = withTransition({
// Example's prop.type will be set as transition value.
transition: props => props.type
})(View)

class SomeComponent extends Component {
render() {
const type = 'slideup_slideup'
return ()
}
}
``

$3

Yusuke Shibata

$3

MIT