-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add new CloseButton
component and useClose
hook
#3096
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good to me @RobinMalfait! 👍
I'm trying to use the CloseButton component in my Disclosure panel, next.js app, but for some reason, I keep getting an error message when I try to import the component from @headlessui/react. the error message says: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. |
@Elieserlaguerre Hey! Are you on the latest versions of If yes, maybe try dropping your Hope that helps 👍 |
I've uninstalled the previous version of @headlessui/react and installed v2
like you suggested, but now I'm getting this error message in my
development log:
Attempted import error: 'CloseButton' is not exported from
***@***.***/react'
(imported as 'CloseButton').
the button works, but it's also giving me that error message you see up
top. I believe it's coming from the import statement at the top of my js
file, but I don't know what I should do to fix it.
…On Fri, Nov 1, 2024 at 10:51 AM Jonathan Reinink ***@***.***> wrote:
I'm trying to use the CloseButton component in my Disclosure panel,
next.js app, but for some reason, I keep getting an error message when I
try to import the component from @headlessui/react. the error message says:
Element type is invalid: expected a string (for built-in components) or a
class/function (for composite components) but got: undefined.
@Elieserlaguerre <https://github.com/Elieserlaguerre> Hey! Are you on the
latest versions of @headlessui/react? You'll need v2, as that's when the
CloseButton component was introduced.
If yes, maybe try dropping your .next folder and rebuilding — you can
sometimes run into stale caches with Next.js.
Hope that helps 👍
—
Reply to this email directly, view it on GitHub
<#3096 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AH3RRCMV2PFOCJIXTPYXSHDZ6OIPBAVCNFSM6AAAAABQ7JHSL2VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINJSGAYDKMJWGQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
--
Sincerely,
Elieser Laguerre
|
This PR adds a new
CloseButton
component to Headless UI as well as a newuseClose
hook.These can be used inside a
Dialog
,Disclosure
orPopover
component and will close it when used.Both the button and the hook are forgiving, meaning if you use them outside of a "closable" component they will do nothing.
CloseButton
componentUse the
CloseButton
component within a "closable" component to automatically close it when the button is clicked:This component also supports the
as
prop allowing you to wrap an existing component with it:useClose
HookThe
useClose
hook is useful in situations where you need more control over when the "closable" component is closed. For example, maybe you want to close a dialog when you submit a form within it: