API.md

Spring configs

import { config } from 'react-spring'

/*
    default: { tension: 170, friction: 26 },
    gentle: { tension: 120, friction: 14 },
    wobbly: { tension: 180, friction: 12 },
    stiff: { tension: 210, friction: 20 },
    slow: { tension: 280, friction: 60 },
*/

Spring

import { Spring } from 'react-spring'

class Spring extends React.PureComponent {
    static propTypes = {
        // Spring config ({ tension, friction })
        config: PropTypes.object,
        // Will skip rendering the component if true and write to the dom directly
        native: PropTypes.bool,
        // Base styles, optional
        from: PropTypes.object,
        // Animates to ...
        to: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
        // Callback when the animation comes to a still-stand
        onRest: PropTypes.func,
        // Frame by frame callback, first argument passed is the animated value
        onFrame: PropTypes.func,
        // Takes a function that receives interpolated styles
        children: PropTypes.func,
        // Same as children, but takes precedence if present
        render: PropTypes.func,
        // Prevents animation if true, you can also pass individual keys
        immediate: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.string)]),
        // When true it literally resets: from -> to
        reset: PropTypes.bool,
    }
    static defaultProps = { from: {}, to: {}, config: config.default, native: false, immediate: false }
}

Transition

import { Transition } from 'react-spring'

class Transition extends React.PureComponent {
    static propTypes = {
        native: PropTypes.bool,
        config: PropTypes.object,
        // Base styles
        from: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
        // Animated styles when the component is mounted
        enter: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
        // Unmpount styles
        leave: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
        // 
        update: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
        // A collectiomn of unique keys that must match with the childrens order
        // Can be omitted if children/render aren't an array
        // Can be a function, which then acts as a key-accessor which is useful when you use the items prop
        keys: PropTypes.oneOfType([
            PropTypes.func,
            PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
            PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        ]),
        // Optional. Let items refer to the actual data and from/enter/leaver/update can return per-object styles
        items: PropTypes.oneOfType([
            PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])),
            PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
        ]),
        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
        render: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
    }

    static defaultProps = { from: {}, enter: {}, leave: {}, native: false, config: config.default }
}

Trail

import { Trail } from 'react-spring'

class Trail extends React.PureComponent {
    static propTypes = {
        native: PropTypes.bool,
        config: PropTypes.object,
        from: PropTypes.object,
        to: PropTypes.object,
        keys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
        children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
        render: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.func), PropTypes.func]),
    }
    static defaultProps = { from: {}, to: {}, native: false, config: config.default }
}

Parallax

import { Parallax } from 'react-spring'

class Parallax extends React.PureComponent {
    static propTypes = {
        // Total (inner) height/width of the scroll container
        pages: PropTypes.number.isRequired,
        config: PropTypes.object,
        // Has a scrollbar or doesn't ...
        scrolling: PropTypes.bool,
        // Scroll horizontally or vertically
        horizontal: PropTypes.bool,
    }
    static defaultProps = {
        config: config.slow,
        scrolling: true,
        horizontal: false,
    }

    static Layer = class extends React.PureComponent {
        static propTypes = {
            // Size of a page, by default 1
            factor: PropTypes.number,
            // Where the layer will be projected to (0=start, 1=first page, ...)
            offset: PropTypes.number,
            // Speed (and direction) it scrolls there, can be positive or negative
            speed: PropTypes.number,
        }
        static defaultProps = {
            factor: 1,
            offset: 0,
            speed: 0,
        }
    }
}