Robin Malfait
aab23c9077
* add unmount strategy to README (React)
* add unmount strategy to README (Vue)
* add different render features (React)
* use render features in Menu and Listbox (React)
* add different render features (Vue)
* use render features in Menu and Listbox (Vue)
* bump dependencies
* add ability to change the ref property using `refName`
Example use case:
```tsx
// Some components have this API with an `innerRef`. The suggested approach is to use
// `React.forwardRef` so that you get the actual `ref` value. However if you already have this
// `innerRef` API than we can use the `refName="innerRef"` to give the `ref` prop a good name. It
// defaults to `ref` so that it still works everywhere else.
function MyButton({ innerRef, ...props }) {
return <button ref={innerRef} {...props} />
}
<Menu.Button as={MyButton} refName="innerRef" />
```
* small cleanup, move refs to props we control
* add tests for the render abstraction (Render)
+ use the unique __ symbol as a default value in the Props type for the
omitable props.
* use render features in Transition (React)
* add/update Transition examples to also showcase the `unmount={false}` render strategy
* bump dependencies
* add example with nested unmount/hide transitions
* add unmount to Transition documentation
61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import React, { useState } from 'react'
|
|
import { Transition } from '@headlessui/react'
|
|
|
|
export default function Home() {
|
|
const [isOpen, setIsOpen] = useState(true)
|
|
|
|
return (
|
|
<>
|
|
<div className="flex justify-center w-screen h-full p-12 bg-gray-50">
|
|
<div className="space-y-2 w-96">
|
|
<span className="inline-flex rounded-md shadow-sm">
|
|
<button
|
|
type="button"
|
|
onClick={() => setIsOpen(v => !v)}
|
|
className="inline-flex items-center px-3 py-2 text-sm font-medium leading-4 text-gray-700 transition bg-white border border-gray-300 rounded-md duration-150-out hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:text-gray-800 active:bg-gray-50"
|
|
>
|
|
{isOpen ? 'Hide' : 'Show'}
|
|
</button>
|
|
</span>
|
|
|
|
<Transition show={isOpen} unmount={false}>
|
|
<Box>
|
|
<Box>
|
|
<Box>
|
|
<Box />
|
|
</Box>
|
|
<Box>
|
|
<Box>
|
|
<Box>
|
|
<Box />
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Box({ children }: { children?: React.ReactNode }) {
|
|
return (
|
|
<Transition.Child
|
|
unmount={false}
|
|
enter="transition translate duration-300"
|
|
enterFrom="transform -translate-x-full"
|
|
enterTo="transform translate-x-0"
|
|
leave="transition translate duration-300"
|
|
leaveFrom="transform translate-x-0"
|
|
leaveTo="transform translate-x-full"
|
|
>
|
|
<div className="p-4 space-y-2 text-sm font-semibold tracking-wide text-gray-700 uppercase bg-white rounded-md shadow">
|
|
<span>This is a box</span>
|
|
{children}
|
|
</div>
|
|
</Transition.Child>
|
|
)
|
|
}
|