pmndrs / react-spring-examples

Installation

npm install
npm start

Demos will be live at http://localhost:8080

Contributors

1. clone react-spring and react-spring-examples under the same root folder

/root
  /react-use-gesture
  /react-use-gesture-examples

2. yarn/npm install both
3. cd react-use-gesture-examples
4. edit index.js

import examples from './components/examples-tests'

//const DEBUG = false
const DEBUG = 'latestbug'

5. go to /demos/tests/latestbug and set up a demo that reproduces the problem
6. npm start, you can now make hot-reload edits in both repos (react-spring and react-spring-examples)
7. you can test integrity by running all examples, edit index.js again:

import examples from './components/examples-hooks'

const DEBUG = false
//const DEBUG = 'latestbug'

react-spring-examples's Issues

Render Props API example missing?

Hi,

I was wondering where I can find the example code of:
https://www.react-spring.io/docs/props/spring

Diagram won't animate when using react-spring v9

Here is a code sandbox that replicates the issue.

Various issues with "Fresh tilled soil" demo

• The container doesn't change height based on number of items
• Items don't animate to their new positions (when shuffled or a preceding item is deleted)
• Double-click the "toggle" button while the items are visible, then double-click it again before the items have finished re-entering. Notice how the items that didn't start their "leave" phase won't animate their "enter" phase because they're already visible.
• Remove all items, then add a bunch of items really fast. Notice how the text says -Infinity and errors appear in the console. Then try removing one of the -Infinity items. Crash!

[slider] The "x" value is not preserved when gesture interrupts

It would be nice if x in the "Gesture Slider" demo was preserved when its animation is interrupted by another gesture.

Steps

1. Set the friction to ~500

2. Drag the slider left/right and release

3. Press down on the slider before x hits 0

4. Notice how the x animation is not stopped when down becomes true

5. Notice how x jumps to 0 when you drag left/right

Add a demo for "delay" function

None of the existing demos pass a function as the delay prop.

Are the examles in a running state ?

There is no animation happening.

Animation doesnt work even if you copy paste the exact code.

Cannot access example links from https://www.react-spring.io/docs/props/

It seems the example links to github from https://www.react-spring.io/docs/props/spring and other components have disappeared. Getting a 404 error now.

Demo ‘renderprops -> reveals’ is not working

when i add native in to <Transition> the animation will not working

[redacted]

[redacted]

Sunburst Example - with useSpring

I have implemented the sunburst example (https://github.com/react-spring/react-spring-examples/tree/renderprops/demos/renderprops) with hooks and functional components. Unfortunately the path animation does not work. The arcGenerator is called but the DOM is not updated.

I'd be grateful for help.

// Implementation Example:
// https://github.com/react-spring/react-spring-examples/tree/renderprops/demos/renderprops/sunburst

import React, { useState, useEffect } from 'react';
import { Group } from '@vx/group';
import { arc as d3arc } from 'd3-shape';
import { scaleLinear, scaleSqrt } from 'd3-scale';
import { interpolate as d3interpolate } from 'd3-interpolate';
import Partition from './Partition';
import styled from 'styled-components';
import { useSpring, animated } from 'react-spring';

const StyledSvg = styled.svg`
    background: #fff;
`;

const SunburstDiagram = props => {
    const {
        nodes,
        width,
        height,
        margin = { top: 0, left: 0, right: 0, bottom: 0 },
    } = props;

    // Complete set of input values
    const [xDomain, setXDomain] = useState([0, 1]);
    const [yDomain, setYDomain] = useState([0, 1]);

    // Output range
    const [xRange] = useState([0, 2 * Math.PI]);
    const [yRange, setYRange] = useState([0, width / 2]);

    useEffect(() => {
        setYRange([yRange[0], width / 2]);
    }, [props.count]);

    // Scale Axis
    const xScale = scaleLinear();
    const yScale = scaleSqrt();

    // Map input domain to output range
    xScale.domain(xDomain).range(xRange);
    yScale.domain(yDomain).range(yRange);

    // Arc generators produce path data from angle and radius values.
    var arcGenerator = d3arc()
        .startAngle(d => Math.max(0, Math.min(2 * Math.PI, xScale(d.x0))))
        .endAngle(d => Math.max(0, Math.min(2 * Math.PI, xScale(d.x1))))
        .innerRadius(d => Math.max(0, yScale(d.y0)))
        .outerRadius(d => Math.max(0, yScale(d.y1)));

    const nodesDescendants = nodes.descendants();

    let { t, fill } = useSpring({
        native: true,
        reset: true,
        from: { t: 0, fill: 'yellow' },
        to: { t: 1, fill: 'black' },
        config: {
            mass: 5,
            tension: 500,
            friction: 100,
            precision: 0.00001,
        },
        onFrame: ({ t }) => handleUpdate(t, xd, yd, yr),
    });

    const handleClick = node => {
        setXDomain([node.x0, node.x1]);
        setYDomain([node.y0, 1]);
        setYRange([node.y0 ? 20 : 0, width / 2]);
    };

    const handleUpdate = (t, xd, yd, yr) => {
        console.log({ t: t, xd: xd, yd: yd, yr: yr });

        xScale.domain(xd(t));
        yScale.domain(yd(t)).range(yr(t));
    };

    const xd = d3interpolate(xScale.domain(), xDomain);
    const yd = d3interpolate(yScale.domain(), yDomain);
    const yr = d3interpolate(yScale.range(), yRange);

    return (
        <StyledSvg width={width} height={height}>
            <Partition top={margin.top} left={margin.left} nodes={nodes}>
                <Group top={height / 2} left={width / 2}>
                    {nodesDescendants.map((node, index) => {
                        return (
                            <animated.path
                                onClick={() => handleClick(node)}
                                className="path"
                                d={t.interpolate(() => arcGenerator(node))}
                                stroke="#fff"
                                strokeWidth="1"
                                fill={fill.interpolate(d => d)}
                                fillRule="evenodd"
                                key={index}
                            />
                        );
                    })}
                </Group>
            </Partition>
        </StyledSvg>
    );
};

export default SunburstDiagram;

Fix "tree view" example for v9

In v9, auto is no longer supported, so we need to fix the "tree view" example.
https://github.com/react-spring/react-spring-examples/blob/111bd7eb6308b95213e963712660a0441e3a4bd2/demos/hooks/tree/index.js#L37

basic typescript examples

small docs issue re typescript

the examples on the main site don't work with typescript, I was wondering what the fix is for:

eg https://codesandbox.io/embed/01yl7knw70

      <a.div class="c back" style={{ opacity: opacity.interpolate(o => 1 - o), transform }} />

gives:
The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

adding an any typing to the o param fixed it

        style={{ opacity: opacity.interpolate((o: any) => 1 - o), transform }}

Missing example for useSprings with deps array

The useSpring and useSprings hooks now take an extra argument that is a "deps" array forwarded to the useEffect call that updates the animations.

Added by this PR: pmndrs/react-spring#652

/cc @Nizarius Could you put an example together, please? 😊

Typescript examples

I think it'd be great if the examples were written in typescript so it'd be clearer on how to use the two together.

for example, i've adapted one of the examples to typescript (no changes, just .tsx instead of .js) but it seems to have typing errors. (original, fork)

on my fork link you can see the file index.tsx is exactly as index.js but in it, the animated value of the y property is inferred as any, which might indicate an issue with the lib's typings. i'm guessing if i had done something like useTransition<A,B> it'd work. but i'm not sure what A and B should be. from the types definition it seems like A is the provided item to iterate on and the B is the animated properties. but that didn't seem to work...

so basically, this boils down to:
1 - why does the example have wrongly inferred types? (y is any)
2 - how could one utilize the generics parameters for (in this case) useTransition so it'd be properly typed?

also, and more importantly, thank you for taking the time to even make these examples and awesome library!
i'd be happy to help convert the examples to typescript once i figure out how to properly type stuff.

renderprops Transition notification demo issues

I've noticed a few issues with the Transition's notification example for renderprops.

1. The source link sends you to a 404 page. I believe the link field for renderprops/messages in examples-renderprops.js is simply pointing to the wrong location ("notifications" vs "messages")
2. the example doesn't seem to be working as expected. While clicking on the demo body creates new messages, they do not animate. Locally removing the native prop works, but I don't know the inner workings of this library to know why that is the case, so I don't feel comfortable creating a PR.

Add navigation for "demos" and "tests"

• Show demos by default
• Add small header to the home page that contains a "Demos" link and a "Tests" link
• Put all test names in a list of buttons where each button changes which test is rendered
• Only render a single test at any given time