Comments (5)
Alternatively, we can drop the setTimeout
and use a callback ref to trigger the animation as soon as the component renders:
const Component = () => {
const [active, setActive] = useState(false);
return (
<Confetti
ref={() => { setActive(true) }}
active={active}
config={confettiConfig}
/>);
}
from react-dom-confetti.
Hooks to the rescue :-)
const Yay : React.FC<{}> = () => {
const trigger = useBoolean(false);
useEffect(() => {
setTimeout(trigger.setTrue, 300);
//eslint-disable-next-line
}, [])
return (<Confetti active={trigger.value} config={confettiConfig} />);
}
from react-dom-confetti.
Is there way to do this without hooks?
from react-dom-confetti.
@AdiBev you could put it inside componentDidMount
. Untested example:
this.state = {
active: false
}
componentDidMount() {
setTimeout(() => {
this.setState({ active: true });
}, 300);
}
...
You probably don't even need the timeout if you use it within a componentDidMount
.
from react-dom-confetti.
This is the first thing I ran in as well. I kind of expected <Confetti active />
to start throwing me some confetti ;-) I fixed it by wiring the active
prop to some hook that changes pretty early in my components lifecycle. The document is clear though: the effect is triggered when the active
prop changes from falsy to truthy. It's the change that triggers it; not the actual value.
from react-dom-confetti.
Related Issues (18)
- Render children, and spout confetti from center of children
- Add support for zIndex modification HOT 2
- TypeError exception happening seemingly on IE10+ HOT 2
- Async loading causes dom style property gets parsed by React HOT 4
- SCRIPT5045: Assignment to read-only properties is not allowed in strict mode HOT 6
- Bump version of dom-confetti HOT 1
- Lag in the Confetti explosion HOT 4
- Config particle colors HOT 1
- Please help me insert this into my WIX site HOT 2
- In safari the position of the confetti is not the same and sometimes not working, any help ?
- Update use of componentWillReceiveProps HOT 1
- v0.1.3 has wrong width and height types HOT 4
- Don't send empty guess
- width and height not working (typescript) HOT 5
- className is missing on typescript props type HOT 3
- Confetti shoots off the screen causes a vertical scroll bar for the duration - expected that it doesn't HOT 1
- React 18.2.0. dependency update HOT 4
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-dom-confetti.