Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. If the docs and the package disagree, prefer the package and open an issue on GitHub or send a pull request with a fix.

Hooks

motion-solid exports hooks for presence, layout orchestration, and motion configuration.

Presence Hooks

  • usePresence(subscribe?: boolean): [Accessor<boolean>, VoidFunction | undefined]
  • useIsPresent(): Accessor<boolean>
  • usePresenceData<T>(): Accessor<T | undefined>
const [isPresent, safeToRemove] = usePresence();

Layout Hooks

  • useInstantLayoutTransition(): (callback: VoidFunction) => void
  • useResetProjection(): () => void
const instantLayoutTransition = useInstantLayoutTransition();
const resetProjection = useResetProjection();

Config Hooks

  • useMotionConfig(): MotionConfigContextValue | null
  • useReducedMotion(): Accessor<boolean>
const config = useMotionConfig();
const prefersReducedMotion = useReducedMotion();

Notes

  • Presence hooks read the nearest AnimatePresence context.
  • useMotionConfig() returns null outside MotionConfig.
  • useReducedMotion() is safe on the server and returns false until the client can read the media query.