Learn REACT-SPRING with Real Code Examples

# react_spring/demo/App1.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        from: { opacity: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'red', ...props }} />
}

export default App

A div fades in on mount using useSpring.

# react_spring/demo/App2.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        x: 0,
        from: { x: -200 }
    })
    return <animated.div style={{ width:120, height:120, background:'blue', transform:props.x.to(v => `translateX(${v}px)`) }} />
}

export default App

A box slides in horizontally.

# react_spring/demo/App3.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.6 }
    })
    return <animated.div style={{ width:100, height:100, background:'green', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Scales a div from 0.6 to 1.

# react_spring/demo/App4.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        rotate: 360,
        from: { rotate: 0 }
    })
    return <animated.div style={{ width:100, height:100, background:'purple', transform:props.rotate.to(r => `rotate(${r}deg)`) }} />
}

export default App

A div rotates 360 degrees.

# react_spring/demo/App5.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        opacity: 1,
        scale: 1,
        from: { opacity: 0, scale: 0.4 }
    })
    return <animated.div style={{ width:110, height:110, background:'orange', opacity:props.opacity, transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

Combines scaling and fading.

# react_spring/demo/App6.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        bg: 'rgb(255,0,0)',
        from: { bg: 'rgb(0,0,255)' }
    })
    return <animated.div style={{ width:120, height:120, background:props.bg }} />
}

export default App

Changes background color smoothly.

# react_spring/demo/App7.jsx
import React from 'react'
import { useSpring, animated, config } from 'react-spring'

function App() {
    const props = useSpring({
        scale: 1,
        from: { scale: 0.3 },
        config: config.wobbly
    })
    return <animated.div style={{ width:100, height:100, background:'cyan', transform:props.scale.to(s => `scale(${s})`) }} />
}

export default App

A bouncy scaling effect.

# react_spring/demo/App8.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        w: 200,
        from: { w: 50 }
    })
    return <animated.div style={{ height:60, background:'black', width:props.w }} />
}

export default App

Expands width from 50px to 200px.

# react_spring/demo/App9.jsx
import React from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const props = useSpring({
        h: 150,
        from: { h: 0 }
    })
    return <animated.div style={{ width:150, background:'pink', height:props.h }} />
}

export default App

Animates height from 0 to full height.

# react_spring/demo/App10.jsx
import React, { useState } from 'react'
import { useSpring, animated } from 'react-spring'

function App() {
    const [hover, setHover] = useState(false)
    const props = useSpring({
        scale: hover ? 1.2 : 1,
        from: { scale: 1 }
    })
    return (
        <animated.div
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{ width:120, height:120, background:'yellow', transform:props.scale.to(s => `scale(${s})`) }}
        />
    )
}

export default App

Scales up when hovered.