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

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 (
    <SomeContainer>
      {/*
        * `in` prop will be passed to internal react-transition-group container,
        * and update component's mounted/unmounted state.
        */}
      <SlideupSomeComponent in={flag} />
    </SomeContainer>
  )
}
 
 

Or you can specify custom transition like:

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

Setting props of react-transition-group

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:

{
  // (props) => {}
  onEnter: props => props.onEnter,
  mountOnEnter: props => props.mountOnEnter
}

Example:

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 (
      <Example mountOnEnter onEnter={::this.onEnter}>
        {/*...*/}
      </Example>
    )
  }
  }

Dynamic transition type

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 (<Example type={type} />)
  }
}

Author

Yusuke Shibata

License

MIT