Framework Integration Overview
useTemporal is designed to work seamlessly with any JavaScript framework. While it uses @vue/reactivity for its reactive core, this doesn't mean it's Vue-specific - the reactivity package is framework-agnostic and can be used anywhere.
Supported Frameworks
Vue 3
Native integration with Vue's reactivity system. Works out of the box with computed properties, watchers, and template rendering.
React
Full support through hooks and context API. Includes custom hooks for reactive updates.
Angular
Works with Angular's change detection through observables and signals.
Svelte
Compatible with Svelte stores and reactive statements.
Vanilla JavaScript
No framework? No problem. Works perfectly with plain JavaScript.
Core Principles
1. Framework Agnostic Core
The core library has zero framework dependencies. It only uses @vue/reactivity which is a standalone package.
// Works in any environment
import { createTemporal, usePeriod, divide } from '@allystudio/usetemporal'
const temporal = createTemporal({ date: new Date() })
const month = usePeriod(temporal, 'month')
const days = divide(temporal.adapter, month.value, 'day')2. Reactive by Design
Built on reactive primitives that can be adapted to any framework's reactivity system.
3. Tree-Shakeable
Import only what you need. Unused features are automatically removed from your bundle.
Integration Patterns
Provider Pattern
Most frameworks benefit from a provider pattern to share the temporal instance:
// Create once at app level
const temporal = createTemporal({ date: new Date() })
// Share via framework's context/provide systemHook/Composable Pattern
Create framework-specific wrappers for better developer experience:
// Vue composable
export function useTemporal() {
return inject('temporal')
}
// React hook
export function useTemporal() {
return useContext(TemporalContext)
}Best Practices
- Single Instance: Create one temporal instance per app (or per independent time context)
- Provide at Root: Make temporal available to all components via context/provide
- Wrap for DX: Create framework-specific wrappers for better type inference
- Lazy Load: Load adapters only when needed to optimize bundle size
Quick Start by Framework
Vue 3
npm install usetemporal vueReact
npm install usetemporal react react-domAngular
npm install usetemporal @angular/coreSvelte
npm install usetemporal svelte