Ark UI

Usage

To use the Presence component, import it from the package:

import { Presence } from '@ark-ui/react'

By default the child component starts out as hidden and remains hidden after the present state is toggled off. This is useful for situations where the element needs to be hidden initially and continue to stay hidden after its presence is no longer required.

import { useState } from 'react'
import { Presence } from './presence'

const Basic = () => {
  const [present, setPresent] = useState(false)
  return (
    <div>
      <button onClick={() => setPresent(!present)}>Toggle</button>
      <Presence present={present}>
        <div className="box">Hidden and Hidden</div>
      </Presence>
    </div>
  )
}

import { createSignal } from 'solid-js'
import { Presence } from './presence'

const Basic = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <div>
      <button onClick={() => setPresent(!present())}>Toggle</button>
      <Presence present={present()}>
        <div class="box">Hidden and Hidden</div>
      </Presence>
    </div>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Presence } from '@ark-ui/vue'

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent">
      <div class="box">Hidden and Hidden</div>
    </Presence>
  </div>
</template>

Lazy Mount

To delay the mounting of a child component until the present prop is set to true, use the lazyMount prop:

import { useState } from 'react'
import { Presence } from './presence'

const LazyMount = () => {
  const [present, setPresent] = useState(false)
  return (
    <div>
      <button onClick={() => setPresent(!present)}>Toggle</button>
      <Presence present={present} lazyMount>
        <div className="box">Unmounted and Hidden</div>
      </Presence>
    </div>
  )
}

import { createSignal } from 'solid-js'
import { Presence } from './presence'

const LazyMount = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <div>
      <button onClick={() => setPresent(!present())}>Toggle</button>
      <Presence present={present()} lazyMount>
        <div class="box">Unmounted and Hidden</div>
      </Presence>
    </div>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Presence } from '@ark-ui/vue'

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" lazyMount>
      <div class="box">Hidden and Hidden</div>
    </Presence>
  </div>
</template>

Unmount on Exit

To remove the child component from the DOM when it’s not present, use the unmountOnExit prop:

import { useState } from 'react'
import { Presence } from './presence'

const UnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <div>
      <button onClick={() => setPresent(!present)}>Toggle</button>
      <Presence present={present} unmountOnExit>
        <div className="box">Hidden and Unmounted on Exit</div>
      </Presence>
    </div>
  )
}

import { createSignal } from 'solid-js'
import { Presence } from './presence'

const UnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <div>
      <button onClick={() => setPresent(!present())}>Toggle</button>
      <Presence present={present()} unmountOnExit>
        <div class="box">Hidden and Unmounted on Exit</div>
      </Presence>
    </div>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Presence } from '@ark-ui/vue'

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" unmountOnExit>
      <div class="box">Hidden and Unmounted on Exit</div>
    </Presence>
  </div>
</template>

Combining Lazy Mount and Unmount on Exit

Both lazyMount and unmountOnExit can be combined for a component to be mounted only when it’s present and to be unmounted when it’s no longer present:

import { useState } from 'react'
import { Presence } from './presence'

const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = useState(false)
  return (
    <div>
      <button onClick={() => setPresent(!present)}>Toggle</button>
      <Presence present={present} lazyMount unmountOnExit>
        <div className="box">Lazy Mount and Unmounted on Exit</div>
      </Presence>
    </div>
  )
}

import { createSignal } from 'solid-js'
import { Presence } from './presence'

const LazyMountAndUnmountOnExit = () => {
  const [present, setPresent] = createSignal(false)
  return (
    <div>
      <button onClick={() => setPresent(!present())}>Toggle</button>
      <Presence present={present()} lazyMount unmountOnExit>
        <div class="box">Lazy Mount and Unmounted on Exit</div>
      </Presence>
    </div>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Presence } from '@ark-ui/vue'

const isPresent = ref(false)
</script>

<template>
  <div>
    <button @click="isPresent = !isPresent">Toggle</button>
    <Presence :present="isPresent" lazyMount unmountOnExit>
      <div class="box">Lazy Mount and Unmounted on Exit</div>
    </Presence>
  </div>
</template>

Conclusion

The Presence component provides an efficient way to control the rendering of components based on a specific condition. Its compatibility with animations offers a smooth and polished user experience. It is highly flexible and can be used to greatly improve the performance and user experience of your React application.