Vadyl + React

A JavaScript library for building user interfaces. Use Vadyl hooks to manage state and data fetching.

npm install @vadyl/react

React Hooks (useQuery, useMutation)

Real-time Subscriptions

Optimistic UI Updates

Suspense Support

Implementation Guide

Wrap your App

Wrap your application with the VadylProvider to enable hooks throughout your component tree.

import { VadylProvider } from '@vadyl/react';
import { vadyl } from './lib/vadyl';

function App() {
  return (
    <VadylProvider client={vadyl}>
      
    VadylProvider>
  );
}

Use the Query Hook

Fetch data with automatic caching and revalidation.

import { useQuery } from '@vadyl/react';

function TodoList() {
  const { data, loading } = useQuery('todos', (client) => 
    client.from('todos').select('*')
  );

  if (loading) return Loading...;
  return {data.map(todo => {todo.title}
)};
}

Ready to build with React?

Start Building Free View Full Docs