https://github.com/vasucp1207/appwrite-web-react

Appwrite web and auth-kit
https://github.com/vasucp1207/appwrite-web-react

appwrite react web

Last synced: 16 days ago
JSON representation

Appwrite web and auth-kit

• Host: GitHub
• URL: https://github.com/vasucp1207/appwrite-web-react
• Owner: vasucp1207
• License: mit
• Created: 2023-04-07T12:57:59.000Z (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2023-04-15T17:26:03.000Z (almost 2 years ago)
• Last Synced: 2024-11-16T10:42:04.374Z (3 months ago)
• Topics: appwrite, react, web
• Language: TypeScript
• Homepage: https://appwrite-web.netlify.app/
• Size: 358 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![appwrite1](https://user-images.githubusercontent.com/85363195/232071479-e176041e-0be3-4123-91bc-d4d296072660.gif)

Appwrite Web React


This library makes it easy to add authentication features to your web app with ready-made auth screens and a bunch of helper functions for interacting to your appwrite database.


- ✅ Easy to use auth screens

- ✅ Confirmation toasts messages

- ✅ Utilities for appwrite server

- ✅ OAuth2 providers

- ✅ Validation errors

## 📦Installation

You can install this library via npm:

```bash

npm i appwrite-web-react

```

## 🦄Usage

Setup api's to interact with the various services provided by the Appwrite server,

```tsx

// utils/utils.js

import { useConfig } from "appwrite-web-react";

const { client, account, database, storage, avatars } = useConfig({

  endpoint: API Endpoint,

  projectId: Project ID

});

export {

  client,

  account,

  database,

  storage,

  avatars

}

```

### Auth Screens

To setup your auth flow quickly,

```tsx

// index.tsx

import { SignInEmail } from 'appwrite-web-react';

import "react-toastify/dist/ReactToastify.css";

import { account } from '../../utils/utils';

export default function Home() {

  return (

    


      

    

  )

}

```


```tsx

// reset.tsx

import React from 'react'

import { Reset, useConfig } from 'appwrite-web-react';

import "react-toastify/dist/ReactToastify.css";

import { account } from '../../utils/utils';

function reset() {

  return (

    


      

    

  )

}


export default reset

```

SignInEmail screen props,

- `account`: Appwrite [account api](https://appwrite.io/docs/client/account).

- `theme`: Theme of auth screen.

- `routePush`: Route you redirected to after loged in your account.

- `routeSign`: Absolute route of your SignInEmail screen.

- `routeRst`: Absolute path of your Reset screen.

### Utilities

```tsx

// room.tsx

import { useListDocuments, useLogedAccount } from 'appwrite-web-react';

import { client, database } from '../../utils/utils';

function room() {

  let { data: movies, error } = useListDocuments(client, database);

  return (

    


      {movies?.map((movie) => {

        


          
{movie.name}

          
{movie.year}

        

      })}

    

  )

}


export default room

```

`useListDocuments` is a hook that uses the [swr](https://swr.vercel.app/) library from Next.js to fetch and automatically re-fetch data from a collection in the Appwrite database when it's changes so there is no need to managing the states for data when working with this hook.