score:0
Accepted answer
i played around your code. i found a way to do it. first of all you should add a condition to usespring to only play the animation if click is true. secondly you should revert click back to false after the animation completed. i used timeout for the reverting part in this code.
export default function app() {
const [click, setclick] = usestate(false);
const [input, setinput] = usestate("");
const clicked = usespring({
to: click
? [{ transform: "scale(0.95)" }, { transform: "scale(1)" }]
: [{ transform: "scale(1)" }],
from: { transform: "scale(1)" },
config: {
mass: 1,
tension: 1000,
friction: 13
}
});
const getinput = e => {
setinput(e.target.value);
};
const handleclick = () => {
setclick(true);
settimeout(() => setclick(false), 700);
};
return (
<div classname="app">
<input placeholder="type here" onchange={getinput} />
<animated.div style={clicked}>
<button style={{ width: "300px" }} onclick={handleclick}>
click me
</button>
</animated.div>
</div>
);
}
Source: stackoverflow.com
Related Query
- Triggering specific function on state change
- Why is state change in my function component not continuously triggering re-render?
- Lost input focus on hooks function state change
- setTimeout() function is not detecting a state change and keeps executing the recursive function
- Redux-form v6 isDirty (and isPristine) selector not triggering re-render on state change
- Using onClick function on a styled-components button doesn't change state until the second click (added sandbox URL)
- React - change css style in one specific state
- How to change an object value of a state array by using a specific array index
- next.js how to change parent state from child component without triggering a button?
- Getting an error when trying to trigger a function for state change
- Applying state change to specific index of an array in React
- Typescript generic state change function type casting error
- How to change the state of a specific value in an array with condition
- Button element in array with onClick property to change state the specific button that is clicked
- How to change the value with all specific key in the nested state in ReactJS
- React, change state works only for one function
- React - How to condition the execution of a function on the state (on the change of state)?
- Prevent useEffect retriggering when updating state from specific function
- set a condition inside render function and change state
- Restricting re-renders to specific state change in functional component
- How to change the state of one class from a function in a different class
- Triggering update of parent component on child state change
- How to change specific item on state of array in React?
- componentDidMount() State Change in Context Provider not triggering re-render on Child Components
- Reactjs change state in App.js from external function
- How to change background image of specific div with 'onclick' function in React.JS
- Calling a function to change state in parent component from the child component in react
- React function component parent state change does not re-render child component
- Change the state of parent component on click of a child component with a specific key in React JS
- React- Unable to change state from child component using function defined within a container component
More Query from same tag
- How can you add to cart only if matching product id?
- different behavior with componentDidMount than useEffect when using jquery emoji plugin
- Dispatching further actions when handling actions
- React/JS - Creating a conditional on the server response of action call
- How to compare a string in Reactjs to a list of strings and display the result
- Overriding types to prevent unsafe any calls
- Axios Post returning no data after 200 response
- YUP validation - how to get the value
- <Link>s rendered outside of a router context cannot navigate
- Add new property inside interface object without changing class in typescript dynamically
- How to open a specific popup on map load?
- Number of current page doesnt change in react
- Why does my function on the server return true but returns false on the client side in Meteor.js
- Webpack fails when run through npm run
- Request cannot be constructed from a URL that includes credentials
- id undefined in onChange event
- ComponentWillMount doesn't set the state React JS
- Proper Way of Searching in React with debounce
- React functional component with non-JSX class has an internal array returning undefined
- cant access Api response in react js
- React - play media after items are loaded with array.map()
- cannot toggle checkbox using Redux dispatch
- How can I disable a particular button after click, in a buttons array?
- Toggling a classname for one button in a list of buttons
- React-native + Redux(Combine Reducers): Create state structure
- Component re-render on state change not happening
- Error when using redux-persist with redux-immutable
- useSelector is not working, redux in react
- Conditionally declare a state in React
- How to remove a string from an array based on string matching id