Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface CollapseOptions<E>

Type parameters

  • E: HTMLElement

Hierarchy

Index

Properties

Properties

Optional appear

appear: boolean

Boolean if the transition should also be triggered immediately once the component mounts. This is generally not recommended for server side rendering/initial page load so it is set to false by default.

Optional className

className: string

An optional className to merge with the current collapse transition className.

Optional enter

enter: boolean

Boolean if the transition should allow for an enter animation once the transitionIn booleanis set to true.

Optional exit

exit: boolean

Boolean if the transition should allow for an exit animation once the transitionIn booleanis set to false.

Optional minHeight

minHeight: string | number

The minimum height that the collapsed element can be which defaults to 0. This can either be a number of pixels or a string CSS height value.

Setting this value to any non-zero value will allow for the element to shrink to the defined min-height, and then expand to the full height once no longer collapsed.

Note: If the minHeight, minPaddingTop, and minPaddingBottom options are all set to 0 (default), the child will be removed from the DOM while collapsed.

Optional minPaddingBottom

minPaddingBottom: string | number

The minimum padding-bottom that the collapsed element can be which defaults to 0. This can either be a number of pixels or a string CSS padding-bottom value.

Note: If the minHeight, minPaddingTop, and minPaddingBottom options are all set to 0 (default), the child will be removed from the DOM while collapsed.

Optional minPaddingTop

minPaddingTop: string | number

The minimum padding-top that the collapsed element can be which defaults to 0. This can either be a number of pixels or a string CSS padding-top value.

Note: If the minHeight, minPaddingTop, and minPaddingBottom options are all set to 0 (default), the child will be removed from the DOM while collapsed.

Optional onEnter

onEnter: EnterHandler<E>

An optional enter handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired right after the transitionIn is set to true.

Optional onEntered

onEntered: EnterHandler<E>

An optional entered handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired once the transition has finished.

Optional onEntering

onEntering: EnterHandler<E>

An optional entering handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired almost immediately after the onEnter callback. However, if the repaint option was enabled, it will ensure the DOM as been repainted before firing to help with CSS transitions.

Optional onExit

onExit: ExitHandler<E>

An optional exit handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles.

This will be fired right after the transitionIn is set to false.

Optional onExited

onExited: ExitHandler<E>

An optional entered handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles. This will also be fired for appear transitions.

This will be fired once the transition has finished.

Note: If the temporary option was enabled, the rendered result will be false and the node actually won't exist in the DOM anymore.

Optional onExiting

onExiting: ExitHandler<E>

An optional exit handler that can be used to determine additional transition styles if you need access to the DOM node to calculate those styles.

This will be fired almost immdiately after the onExit callback. However, if the repaint option was enabled, it will ensure the DOM as been repainted before firing to help with CSS transitions.

Optional ref

ref: Ref<E>

An optional ref that will get merged with the required ref for the transition to work.

Optional temporary

temporary: boolean

Boolean if the component should mount and unmount based on the current transitionIn stage with a default value of false. When this is false, the first result (rendered) in the return value array will always be true.

When this is set to true, the first result (rendered) in the return value array will be true only while the transitionIn option is true or the transition is still happening.

Note: Changing this option while the hook/component is mounted will not do anything. If you want to dynamically change the component's temporary state, you will need to also change the key to get the component to re-mount.

Optional timeout

timeout: number | { appear?: number; enter?: number; exit?: number } | { appear?: number; enter?: number; exit?: number }

The timeout for the collapse transition. This will default to 250ms enter and 200ms exit.

Generated using TypeDoc