⚡
Blazing Fast
Zero runtime dependencies. Minimal bundle size. Maximum performance.
BindraReactive Data Management
Lightweight, type-safe reactive data management for TypeScript applications
Skip to content
Quick Start
Installation
bash
npm install bindrabash
pnpm add bindrabash
yarn add bindrabash
bun add bindraBasic Usage
typescript
import { DataSource } from 'bindra';
interface User {
id: number;
name: string;
email: string;
}
const users = new DataSource<User>({
url: '/api/users'
});
// Fetch data
await users.fetch();
// Create record
const newUser = await users.create({
name: 'Alice',
email: 'alice@example.com'
});
// Update record
await users.update(1, { name: 'Bob' });
// Delete record
await users.delete(1);
// Listen to events
users.on('created', (user) => {
console.log('User created:', user);
});Why Bindra?
Bindra provides a simple, powerful way to manage data in modern TypeScript applications:
- 🚀 Production Ready: 155+ tests, zero runtime dependencies
- 📦 Lightweight: < 50KB minified
- 🔧 Flexible: Local data, remote APIs, or hybrid approaches
- 🎨 Modern: Built with TypeScript, ES modules, and modern APIs
- 🔄 Reactive: Automatic UI updates with signals and reactive objects
- ✅ Validated: Built-in validation with custom rules
- 💾 Cached: Smart caching to reduce API calls
- 🔌 Real-time: WebSocket support for live updates
Key Features
Reactive Data Management
typescript
const users = new DataSource<User>({ url: '/api/users' });
// Subscribe to changes
users.currentRecord.subscribe((user) => {
console.log('Current user:', user);
});
// Navigate records
users.next(); // Move to next
users.prev(); // Move to previous
users.goto(5); // Jump to indexValidation System
typescript
const products = new DataSource<Product>({
url: '/api/products',
fields: [
{
name: 'name',
validation: {
required: true,
type: 'string',
min: 3,
max: 100
}
},
{
name: 'price',
validation: {
required: true,
type: 'number',
min: 0
}
}
]
});Real-time Updates
typescript
const messages = new DataSource<Message>({
url: '/api/messages',
realtime: {
enabled: true,
url: 'wss://api.example.com/ws',
reconnect: true
}
});
messages.on('realtime:message', (data) => {
console.log('New message:', data);
});Caching & Performance
typescript
const users = new DataSource<User>({
url: '/api/users',
cache: {
enabled: true,
ttl: 300000 // 5 minutes
},
pagination: {
pageSize: 20
}
});Framework Integration
React
typescript
import { useEffect, useState } from 'react';
import { DataSource } from 'bindra';
function UserList() {
const [users, setUsers] = useState([]);
const ds = new DataSource({ url: '/api/users' });
useEffect(() => {
ds.fetch().then(() => setUsers(ds.data));
const unsubscribe = ds.on('dataChanged', (data) => {
setUsers(data);
});
return unsubscribe;
}, []);
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}Vue
vue
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { DataSource } from 'bindra';
const users = ref([]);
const ds = new DataSource({ url: '/api/users' });
onMounted(async () => {
await ds.fetch();
users.value = ds.data;
ds.on('dataChanged', (data) => {
users.value = data;
});
});
</script>
<template>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }}
</li>
</ul>
</template>Learn More
Articles
Community
Built with ❤️ for the TypeScript community