react-spring-examples's Issues
Demo ‘renderprops -> reveals’ is not working
when i add native
in to <Transition>
the animation will not working
Animation doesnt work even if you copy paste the exact code.
Diagram won't animate when using react-spring v9
Here is a code sandbox that replicates the issue.
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? 😊
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;
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.
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
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
Are the examles in a running state ?
[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
-
Set the
friction
to ~500 -
Drag the slider left/right and release
-
Press down on the slider before
x
hits 0 -
Notice how the
x
animation is not stopped whendown
becomes true -
Notice how
x
jumps to 0 when you drag left/right
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
Add a demo for "delay" function
None of the existing demos pass a function as the delay
prop.
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.
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 }}
[redacted]
[redacted]
renderprops Transition notification demo issues
I've noticed a few issues with the Transition's notification example for renderprops
.
- The source link sends you to a 404 page. I believe the
link
field forrenderprops/messages
inexamples-renderprops.js
is simply pointing to the wrong location ("notifications" vs "messages") - 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.
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!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.