Composables

Composables are class-based reactive utilities. Attach them to any component with @Compose — their reactive properties and lifecycle hooks are wired automatically.

npm install @praxisjs/composables

pnpm add @praxisjs/composables

yarn add @praxisjs/composables

bun add @praxisjs/composables

How @Compose works

import { Compose } from '@praxisjs/decorators'
import { WindowSize } from '@praxisjs/composables'

@Component()
class App extends StatefulComponent {
  @Compose(WindowSize)
  window!: WindowSize

  render() {
    return <p>Viewport: {() => this.window.width} × {() => this.window.height}</p>
  }
}

@Compose does three things:

1. Creates an instance of the composable class per component instance
2. Calls setup() and binds reactive properties onto the field (this.window)
3. Hooks the composable's onMount and onUnmount into the component lifecycle automatically

No manual setup or teardown needed.

Available composables

Quick reference