CODEWITHSUNDEEP
javascriptcssreactjsreact-spring
aa087159
aa087159

Reputation: 23

How to change icons with React Spring?

I want to change the icon when I click on it with react spring. For example, when I click on "🤪", it will change into "😄". In the documentation of react spring, it's possible to make it with the transition props, but how do I toggle it with onClick?

https://www.react-spring.io/docs/props/transition

the following codes are provided by react spring

<Transition
  items={toggle}
  from={{ position: 'absolute', opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {toggle =>
    toggle
      ? props => <div style={props}>😄</div>
      : props => <div style={props}>🤪</div>
  }
</Transition>

Upvotes: 0

Views: 536

Answers (1)

marzelin
marzelin

Reputation: 11600

create a button and change toggle value on click:

function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <>
      <button onClick={() => setToggle(!toggle)}>toggle</button>
      <Transition
        items={toggle}
        from={{ position: "absolute", opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {toggle =>
          toggle
            ? props => <div style={props}>😄</div>
            : props => <div style={props}>🤪</div>
        }
      </Transition>
    </>
  );
}

Upvotes: 1

Related Questions