Slide

A slide is a dynamic element that transitions in from the edges of the screen, typically used to present content in an engaging way. The direction prop controls which of the screen the transition starts from.

import {QSlide} from "@qui/react"

Examples

Showcase

The component's mountOnEnter prop prevents the child component from being mounted until in is true. This prevents the relatively positioned component from scrolling into view from its off-screen position. Similarly, the unmountOnExit prop removes the component from the DOM after it has been transition off-screen.

import {ReactNode, useState} from "react"

import {ThumbsUp} from "lucide-react"

import {QButton, QIcon, QSlide} from "@qui/react"

export default function Showcase(): ReactNode {
  const [show, setShow] = useState(false)

  const toggle = () => {
    setShow((prevState) => !prevState)
  }

  return (
    <div className="grid justify-center">
      <div className="flex h-[180px] flex-col items-center">
        <QButton className="mb-4" onClick={toggle} variant="outline">
          {show ? "Hide" : "Show"}
        </QButton>
        <QSlide direction="up" in={show} mountOnEnter unmountOnExit>
          <QIcon icon={ThumbsUp} size="xl" />
        </QSlide>
      </div>
    </div>
  )
}

API

Props

This component extends the Transition component from react-transition-group.

Name & Description	Option(s)	Default
children ^* React Children	ReactElement
direction ^* Direction the child node will enter from.	\| 'down' \| 'left' \| 'up' \| 'right'
addEndListener Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine-grained transition end logic. Note: Timeouts are still used as a fallback if provided.	( node: HTMLElement \| object, done: () => void, ) => void
appear Whether to show the animation when the component is first mounted.	boolean
className Class applied to the root element.	string
container An HTML element, or a function that returns one. It's used to set the container the Slide is transitioning from.	\| Element \| (( element: Element, ) => Element)
easing The transition timing function. You may specify a single easing or an object containing independent values for enter and exit.	\| string \| { enter: string exit: string }
in Show the component; triggers the enter or exit states	boolean
mountOnEnter By default, the child component is mounted immediately along with the parent Transition component. If you want to "lazy mount" the component on the first in = `true` you can set mountOnEnter. After the first enter transition the component will stay mounted, even on "exited", unless you also specify unmountOnExit.	boolean
nodeRef A React reference to DOM element that need to transition. example. When `nodeRef` prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node. When changing `key` prop of `Transition` in a `TransitionGroup` a new `nodeRef` needs to be provided to `Transition` with changed `key` prop. see also.	Ref<HTMLElement>
onEnter Callback fired before the "entering" status is applied. An extra parameter `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onEntered Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onEntering Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount	( node: HTMLElement \| object, isAppearing: boolean, ) => void
onExit Callback fired before the "exiting" status is applied.	( node: HTMLElement \| object, ) => void
onExited Callback fired after the "exited" status is applied.	( node: HTMLElement \| object, ) => void
onExiting Callback fired after the "exiting" status is applied.	( node: HTMLElement \| object, ) => void
style Inline styles	CSSProperties
timeout The duration of the transition, in milliseconds. Required unless addEndListener is provided. You may specify a single timeout for all transitions: timeout={500} or individually: timeout={{ appear: 500, enter: 300, exit: 500, }} appear defaults to the value of `enter`. enter defaults to `0`. exit defaults to `0`.	\| number \| { appear?: number enter?: number exit?: number }
unmountOnExit By default, the child component stays mounted after it reaches the 'exited' state. Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.	boolean

children

Type

ReactElement

Description

React Children

direction

Type

| 'down'
| 'left'
| 'up'
| 'right'

Description

Direction the child node will enter from.

addEndListener

Type

(
  node: HTMLElement | object,
  done: () => void,
) => void

Description

Add a custom transition end trigger. Called with the transitioning DOM node and a done callback. Allows for more fine-grained transition end logic. Note: Timeouts are still used as a fallback if provided.

appear

Type

boolean

Description

Whether to show the animation when the component is first mounted.

className

Type

string

Description

Class applied to the root element.

container

Type

| Element
| ((
    element: Element,
  ) => Element)

Description

An HTML element, or a function that returns one. It's used to set the container the Slide is transitioning from.

easing

Type

| string
| {
    enter: string
    exit: string
  }

Description

The transition timing function. You may specify a single easing or an object containing independent values for enter and exit.

Type

boolean

Description

Show the component; triggers the enter or exit states

mountOnEnter

Type

boolean

Description

By default, the child component is mounted immediately along with the parent Transition component. If you want to "lazy mount" the component on the first in = true you can set mountOnEnter. After the first enter transition the component will stay mounted, even on "exited", unless you also specify unmountOnExit.

nodeRef

Type

Ref<HTMLElement>

Description

A React reference to DOM element that need to transition. example. When nodeRef prop is used, node is not passed to callback functions (e.g. onEnter) because user already has direct access to the node. When changing key prop of Transition in a TransitionGroup a new nodeRef needs to be provided to Transition with changed key prop. see also.

onEnter

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired before the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onEntered

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired after the "entered" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onEntering

Type

(
  node: HTMLElement | object,
  isAppearing: boolean,
) => void

Description

Callback fired after the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

onExit

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired before the "exiting" status is applied.

onExited

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired after the "exited" status is applied.

onExiting

Type

(
  node: HTMLElement | object,
) => void

Description

Callback fired after the "exiting" status is applied.

style

Type

CSSProperties

Description

Inline styles

timeout

Type

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

Description

The duration of the transition, in milliseconds. Required unless addEndListener is provided.

You may specify a single timeout for all transitions:

timeout={500}

or individually:

timeout={{
  appear: 500,
  enter: 300,
  exit: 500,
}}

appear defaults to the value of enter. enter defaults to 0. exit defaults to 0.

unmountOnExit

Type

boolean

Description

By default, the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you'd prefer to unmount the component after it finishes exiting.

Collapse

Typography