@sanity/sdk-react 0.0.0-alpha.2 → 0.0.0-alpha.20

package/README.md

@@ -5,93 +5,64 @@
   <h1 align="center">Sanity SDK - React</h1>
 </p>
 
-React components and hooks for creating Sanity applications.
+React hooks for creating Sanity applications.
 
-## Installation
+## 💻 Installation
 
 ```bash
-npm i @sanity/sdk-react @sanity/sdk styled-components
+npm i @sanity/sdk-react @sanity/sdk
 ```
 
-## SDK Documentation
+> 💡 Looking to build a Sanity application? Check out the [Quick Start](#quick-start) section.
+
+## 📚 SDK Documentation
 
 See the [SDK Documentation](https://sdk-docs.sanity.dev) for more information.
 
-## Quick Start
+## 🚀 Quick Start
 
 Here's how to implement your Sanity application:
 
-```tsx
-import {createSanityInstance} from '@sanity/sdk'
-import {AuthBoundary, SanityProvider} from '@sanity/sdk-react/components'
-import {useCurrentUser, useLogOut} from '@sanity/sdk-react/hooks'
-import {Button, Flex, Spinner, Text, ThemeProvider} from '@sanity/ui'
-import {buildTheme} from '@sanity/ui/theme'
-import {Suspense} from 'react'
-
-const theme = buildTheme({})
-const sanityInstance = createSanityInstance({
-  projectId: '<your-project-id>',
-  dataset: '<your-dataset>',
-  // optional auth config set projectId and dataset to '' and authScope to 'org' for a global token
-  // auth: {
-  //   authScope: 'org',
-  //   ...
-  // },
-})
-
-export function App(): JSX.Element {
-  return (
-    <ThemeProvider theme={theme}>
-      <Suspense fallback={<Spinner />}>
-        <SanityProvider sanityInstance={sanityInstance}>
-          <AuthBoundary header={<Text>My Sanity App</Text>}>
-            <Authenticated />
-          </AuthBoundary>
-        </SanityProvider>
-      </Suspense>
-    </ThemeProvider>
-  )
-}
-
-function Authenticated() {
-  const currentUser = useCurrentUser()
-  const logout = useLogOut()
-
-  return (
-    <Flex direction="column" gap={2}>
-      <Text>Hello, {currentUser?.name}!</Text>
-      <Button text="Logout" onClick={logout} mode="ghost" />
-    </Flex>
-  )
-}
+1. Create a new React TypeScript project using the Sanity template
+
+```bash
+pnpx sanity@latest init --template app-quickstart
+cd my-content-os-app
 ```
 
-## Customizing your application
+2. Install dependencies
 
-If you would like to implement a custom look and feel, you can use the hooks in your own components.
+```bash
+npm i
+```
 
-## Available Hooks
+3. Run the app
 
-- `useAuthState` - Get current authentication state
-- `useCurrentUser` - Access the currently authenticated user
-- `useAuthToken` - Access the authentication token
-- `useLoginUrls` - Get OAuth login URLs
-- `useLogOut` - Handle user logout
-- `useSanityInstance` - Access the Sanity client instance
-- and more...
+```bash
+npm run dev
+```
+
+4. Open the App in Sanity Dashboard with your organization ID
 
-## TypeScript Support
+```
+https://core.sanity.io/<your-organization-id>?dev=http://localhost:3333
+```
 
-This package includes TypeScript definitions. You can import types like:
+5. Update the `src/App.tsx` file with your Sanity project and dataset
 
 ```tsx
-import type {
-  SanityProviderProps,
-  AuthBoundaryProps,
-  LoginLayoutProps,
-  LoginErrorProps,
-} from '@sanity/react'
+// src/App.tsx
+import {createSanityInstance} from '@sanity/sdk'
+...
+
+const sanityConfig: SanityConfigs = [
+  {
+    projectId: 'abc123',
+    dataset: 'production',
+  },
+]
+
+...
 ```
 
 ## License