I am trying when I click on a modal to have an animation to show the modal but I don't achieve to do that using Tailwind and react.
Here is my code :
import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import Wrapper from "./Wrapper";
import Input from "./Input";
import "./styles.css";
import Button from "./Button";
import Modal from "./Modal";
function App() {
const [showModal, setShowModal] = useState(false);
const handleShowModal = useCallback(() => {
setShowModal(!showModal);
}, [showModal]);
const handleCloseModal = useCallback(() => {
setShowModal(false);
}, []);
return (
<div className="p-4">
<h1 className="text-red-500 text-center">PlayGround</h1>
<Wrapper className="p-2">
<Input />
</Wrapper>
<Wrapper className="p-2">
<Button onClick={handleShowModal}>Show Modal</Button>
{showModal && <Modal onCancel={handleCloseModal} />}
</Wrapper>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
And you can see my full code here :
I would like something like that :
How can I do that ?
Thank you very much !
I recommend using headless ui
you can use like this
import { Transition } from '@headlessui/react'
import { useState } from 'react'
function MyComponent() {
const [isShowing, setIsShowing] = useState(false)
return (
<>
<button onClick={() => setIsShowing((isShowing) => !isShowing)}>
Toggle
</button>
<Transition
show={isShowing}
enter="transition-opacity duration-75"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="transition-opacity duration-150"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
I will fade in and out
</Transition>
</>
)
}