How to access your presets? about react-router-transition

[jacobangel]

You can add them by object spread, or manually:

import { presets, RouteTransition } from 'react-router-transition';

<RouteTransition {...preset.slideRight}>  .. </RouteTransition>

// OR 

<RouteTransition
  atEnter={preset.slideRight.atEnter} 
  atLeave={preset.slideRight.atLeave} 
  atActive={preset.slideRight.atActive} 
>  .. </RouteTransition>

[maisano]

@ADavidLiu – it depends on which version of this library you're using. The most recent version of the API removed all presets from the library.

[maisano]

the presets should be accessible from the top-level module, e.g.

import { presets } from 'react-router-transition';

and while react-motion is a dependency of this project, we don't export it anywhere. if you wanted to set different attributes for custom transitions, you don't need to use react-motion directly–you would just define the properties in the atEnter, atLeave, etc.

[kennetpostigo]

@maisano thank you for the reply, How to I activate the presets in the transition component? So far I have atEnter, atLeave, `atActive, not sure how to split the preset up to put into these props. I tried looking at the demo and I couldn't quite understand it.

[kennetpostigo]

@jacobangel Thank you!

[uxlayouts]

I'm getting: 'preset' is not defined no-undef
Also don't you still need path=""?

[maisano]

@uxlayouts have you imported them from the react-router-transition package? and yes, on the latest version you still need a pathname prop–this will change very soon however.

[ADavidLiu]

Is this still valid? I'm getting Attempted import error: 'presets' is not exported from 'react-router-transition'.

How can I access these so I don't have to create custom style animations?