Comments (1)
const A = ({ opacity, ...allTheOtherProps }) => (
<animated.div style={{ ...defaultStyles, opacity, backgroundColor: '#247BA0' }}>A</animated.div>
)
const B = ({ opacity }) => (
<animated.div style={{ ...defaultStyles, opacity, backgroundColor: '#B2DBBF' }}>B</animated.div>
)
class App extends React.PureComponent {
state = { toggled: true }
toggle = () => this.setState(state => ({ toggled: !state.toggled }))
render() {
return (
<div onClick={this.toggle}>
<Transition
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}>
{this.state.toggled ? A : B}
</Transition>
</div>
)
}
}
Transition either accepts a list, in which case you give a list of functions that receive props:
{list.map(item => styles => <div style={styles} />} // styles contains the animated props
or a single item, so you give it a function that receives props:
{styles => <div style={styles} />}
You can pass on props to the receiving component by giving them to Transition directly:
<Transition
native
...
transitionDoesntKnowMeButIWillBeForwardedAnyway={true}>
As for this part: ({ opacity, ...allTheOtherProps })
, it's basic es6 destructuring, it helps sorting through the props you get. Here we extract opacity and collect everything else into allTheOtherProps, should you need them.
from react-spring.
Related Issues (20)
- [bug]: When included in a module, react-spring resolves to the string "/static/media/react-spring_web.development.34d7028f586cc8ee5e8e.cjs" HOT 2
- why require('react-spring') returns string instead of object HOT 1
- [bug]: @react-spring/konva + typescript HOT 3
- [bug]: Noise demo page - CodeSandbox still using 9.5.5 version
- [feat]: Integration of Tailwind CSS with React Spring for Declarative and Styled Animations
- [bug]: Wrong source-maps
- [bug]: ./node_modules/@react-spring/shared/dist/react-spring_shared.legacy-esm.js 1023:7 HOT 3
- [bug]: update transform
- [bug]: react-spring Identifier 'React' has already been declared HOT 3
- [bug]: Incorrect tooltips in useTransition docs HOT 1
- [bug]: React-Spring.dev main website down HOT 1
- [bug]: useResize is jumpy
- [bug]: The leave option in config object behaves inconsistently when using useTransition HOT 1
- [bug]: Website with docs not working in chrome (120.0.6099.72) HOT 3
- [bug]: Documentation website is broken after the first visit on most desktop browser HOT 8
- [bug]: libc++abi: terminating with uncaught exception of type std::__1::system_error: mutex lock failed: Invalid argument HOT 1
- [bug]: It’s the same problem. There is no CSS style when visiting the website. HOT 1
- [bug]: Animation did not run when using useSpring in next 14 Dev Mode. HOT 1
- [bug]: styles are not updated when using useSprings in conjunction with deleting items from a list HOT 1
- [bug]: `Dynamic require of "react-native" is not supported` on react native web
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.
from react-spring.