Atomic UI

transition

Monitor component lifecycles and control transitions.

Feature

  • No style

  • Provider Component and composable hooks.

  • Provides Vue-like, className-based transitions.

    Because they are infinitely smaller and higher performing, they can replace className-based 3rd party modules such as headlessui/transition.

Example

import { Transition } from "https://deno.land/x/atomic_ui_react@$VERSION/mod.ts";
import { useState } from "react";

export default () => {
  const [isShow, setIsShow] = useState(false);
  return (
    <Transition
      isShow={isShow}
      enter="transition duration-300"
      enterFrom="opacity-0"
      leave="transition"
      leaved="opacity-0"
    >
      root
    </Transition>
  );
};

API

Transition

The transition component lets you add enter/leave transitions.

Generics

  • As extends keyof JSX.IntrinsicElements

Props

NameRequired / DefaultDescription
isShow✅boolean
Whether the component should be shown or hidden.
asdivAs
The default tag.
immediatefalseboolean
Whether do transitions immediately(on first mount) or not.
- true - do transition on first mount.
- false - do not transition on first mount.
unmounttrueboolean
Whether unmount(remove DOM) at transition phase is leaved or not.
enterFrom-string
Classes before the enter phase starts.
enter-string
Classes during the entire enter phase.
enterTo-string
Classes immediately after the enter phase starts.
entered-string
Classes the enter phase is ended.
leaveFrom-string
Classes during the entire leave phase.
leave-string
Classes during the entire leave phase.
leaveTo-string
Classes before the leave phase starts.
leaved-string
Classes the leave phase is ended.
ref-Ref<Element>
...allAttributes-AllHTMLAttributes<Element>
All HTML attributes.

Return

JSX.Element

WithTransition

Component to automatically adapt transitions to the root child.

Example

import { WithTransition } from "https://deno.land/x/atomic_ui_react@$VERSION/mod.ts";
export default () => {
  return (
    <WithTransition
      enter="transition duration-300"
      enterFrom="opacity-0"
      leaved="text-red-500"
      isShow
    >
      {(attrs, { isShowable }) => (isShowable ? <div {...attrs}></div> : <></>)}
    </WithTransition>
  );
};

Props

NameRequired / DefaultDescription
isShow✅boolean
Whether the component should be shown or hidden.
children✅(attributes: Attributes, contexts: Contexts) => ReactElement
Render children with props.
immediatefalseboolean
Whether do transitions immediately(on first mount) or not.
- true - do transition on first mount.
- false - do not transition on first mount.
enterFrom-string
Classes before the enter phase starts.
enter-string
Classes during the entire enter phase.
enterTo-string
Classes immediately after the enter phase starts.
entered-string
Classes the enter phase is ended.
leaveFrom-string
Classes during the entire leave phase.
leave-string
Classes during the entire leave phase.
leaveTo-string
Classes before the leave phase starts.
leaved-string
Classes the leave phase is ended.
ref-Ref<Element>

Render props

NNameDescription
1attributes
classNamestring | undefined
refRef<Element>
2contexts
classNamesstring[]
The className tokens adapted currently transition.
cleanTransitionsPartial<Transitions>
Non-duplicated token and space transition props.
It guarantee that there is no empty string or spaces only characters.
isCompletedboolean
Whether transition lifecycle is completed or not.
currentTransitionsTransitionName[]
List of currently adapted transition.
statusTransitionStatus
Current transition lifecycle.
isShowableboolean
Whether transition is completed and isShow state is false or not.
isActivatedboolean
Whether transitions are activated or not.
lifecycleTransitionLifecycle
Named transition lifecycle.
  • init: initializing
  • start: Start
  • wait: Waiting
  • end: Ended
mode"enter" | "leave" | undefined
Current transition mode.
If it is not activated, return undefined.

useTransition

Monitors the mount lifecycle and returns the appropriate transition status.

Example

import { useRef, useState } from "react";
import { useTransition } from "https://deno.land/x/atomic_ui_react@$VERSION/mod.ts";

export default () => {
  const [isEnter] = useState(true);
  const ref = useRef<HTMLDivElement>(null);
  const [{ className }] = useTransition(
    { isEnter, duration: ref },
    {
      enter: "transition duration-300",
      enterFrom: "opacity-0",
    }
  );
  return <div ref={ref} className={className}></div>;
};

useTransitionLifecycle

Reactive state that records the current status of the transaction lifecycle

Types

import { DependencyList } from "react";
import {
  TransitionLifecycle,
  Useable,
} from "https://deno.land/x/atomic_ui_react@$VERSION/mod.ts";
declare function useTransitionLifecycle(
  param: {
    /** Specifies the transition duration */
    duration: number | (() => number);
  } & Partial<Useable>,
  /** Effect will only activate if the values in the list change.
   * Must be specified to monitor component lifecycle. Otherwise, loops may occur.
   */
  deps: DependencyList
): TransitionLifecycle;

Example

import {
  getDuration,
  useTransitionLifecycle,
} from "https://deno.land/x/atomic_ui_react@$VERSION/mod.ts";

export default () => {
  const [isActivated, lifecycle] = useTransitionLifecycle(
    {
      duration: () => {
        const el = globalThis.document.getElementById("target");
        return el ? getDuration(el) : 0;
      },
    },
    []
  );
};

Looking for Atomic CSS?

How about mapcss?