react_supabase_provider_hook_context_quickstart.ts

1import React from 'react'
2import { createClient } from '@supabase/supabase-client'
3import { SupabaseProvider, useSupabase } from 'use-supabase'
4
5const supabase = createClient('https://xyz.supabase.co', 'public-anon-key')
6
7const App = () => (
8  <SupabaseProvider value={supabase}>
9    <MyComponent />
10  </SupabaseProvider>
11)
12
13const MyComponent = () => {
14  const supabase = useSupabase()
15
16  // Use the supabase client as you normally would
17  const fetchTasks = async () => {
18    const { data, error } = await supabase.from('tasks').select('*')
19    if (error) console.error(error)
20    else console.log(data)
21  }
22
23  return (
24    <button onClick={fetchTasks}>
25      Fetch Tasks
26    </button>
27  )
28}
29
30export default App