Presence

TS

import { … } from "@fungi.computer/caps/components/presence";

Hero

TSX

import { Collapse } from "@fungi.computer/caps/components/presence";

export default function Hero() {
  return (
    <Collapse open className="max-w-sm">
      <div className="rounded-box border border-base-300 bg-base-100 p-md">
        <p className="text-sm">Tip: morels love ground near dying elms.</p>
      </div>
    </Collapse>
  );
}

Show and hide

TSX

import { Badge } from "@fungi.computer/caps/components/badge";
import { Button } from "@fungi.computer/caps/components/button";
import { Presence } from "@fungi.computer/caps/components/presence";
import { useState } from "react";

export default function ShowAndHide() {
  const [found, setFound] = useState(false);
  return (
    <div className="flex items-center gap-md">
      <Button
        size="sm"
        onClick={() => {
          setFound((value) => !value);
        }}
      >
        Log a find
      </Button>
      <Presence show={found}>
        <Badge tone="success">New find</Badge>
      </Presence>
    </div>
  );
}

Swap

TSX

import { Button } from "@fungi.computer/caps/components/button";
import { Swap } from "@fungi.computer/caps/components/presence";
import { useState } from "react";

export default function SwapExample() {
  const [saving, setSaving] = useState(false);
  const save = () => {
    setSaving(true);
    window.setTimeout(() => {
      setSaving(false);
    }, 900);
  };
  return (
    <div className="flex items-center gap-md">
      <Button size="sm" onClick={save}>
        Save notes
      </Button>
      <Swap swapKey={saving ? "saving" : "saved"} className="text-sm">
        {saving ? "Saving…" : "Saved"}
      </Swap>
    </div>
  );
}

Props

PresenceProps

Prop	Type	Description
show	boolean	Whether the content is present. Leaving content stays mounted until it has left.
appear?	boolean	Animate the first mount too (for content that arrives after the page).
children	ReactNode

• showboolean

  Whether the content is present. Leaving content stays mounted until it has left.

• appear?boolean

  Animate the first mount too (for content that arrives after the page).

• childrenReactNode

CollapseProps

Prop	Type	Description
open	boolean	Open: the content takes its height. Closed: no space, and out of the accessibility tree.
children	ReactNode

• openboolean

  Open: the content takes its height. Closed: no space, and out of the accessibility tree.

• childrenReactNode

SwapProps

Prop	Type	Description
swapKey	string	Names the current content. A new key crossfades from the old content to the new.
anchor?	"start" | "end"	Which edge leaving content holds to while the box resizes; end for right-aligned actions.
children	ReactNode

• swapKeystring

  Names the current content. A new key crossfades from the old content to the new.

• anchor?"start" | "end"

  Which edge leaving content holds to while the box resizes; end for right-aligned actions.

• childrenReactNode

Full types: API reference.