Breaking News: Grepper is joining You.com. Read the official announcement!

react typescript tailwind toggle button

akileus answered on June 15, 2022 Popularity 8/10 Helpfulness 6/10

answer react typescript tailwind toggle button

react typescript tailwind toggle button

Comment

import React from "react"
import cx from "classnames"

function App() {
  const [toggle, setToggle] = React.useState<boolean>(false)

  const buttonClasses = cx({
    "bg-blue-500 hover:bg-blue-700": !toggle,
    "bg-red-500 hover:bg-red-500": toggle,
  })
  return (
    <div className="bg-gray-200 flex items-center justify-center h-screen">
      <button
        className={`p-3 rounded-sm ${buttonClasses}`}
        onClick={() => setToggle(!toggle)}
      >
        Toggle
      </button>
    </div>
  )
}

export default App

Popularity 8/10 Helpfulness 6/10 Language typescript

Source: www.codegrepper.com

Tags: button react-typescript toggle typescript

Link to this answer
Share Copy Link