1.0.0 • Published 2 years ago
@caminkunick/firebase-signin-ui v1.0.0
@caminkunick/firebase-signin-ui
Made with create-react-library
Install
npm install --save @caminkunick/firebase-signin-ui
Usage
import React, { useState } from 'react'
import { FirebaseOptions } from 'firebase/app'
import { FirebaseSignInUI, FSUIConfig } from '@caminkunick/firebase-signin-ui'
import '@caminkunick/firebase-signin-ui/dist/index.css'
import { Typography } from '@mui/material'
export let firebaseConfig: FirebaseOptions = { ...config }
const App = () => {
const [open, setOpen] = useState<boolean>(false)
const handleOpen = (open: boolean) => () => setOpen(open)
const config: FSUIConfig = {
providers: ['google'],
callback: (user) => console.log(user),
onError: (err) => console.warn(err.message)
}
return (
<FirebaseSignInUI
firebaseConfig={firebaseConfig}
title='Welcome'
open={open}
onClose={handleOpen(false)}
config={config}
/>
)
}
Property
Prop | Type | Default | Description |
---|---|---|---|
firebaseConfig* | FirebaseOptions | config value from firebase console | |
title | ReactNode | title Element of tab sign in with E-mail | |
variant | 'dialog' | 'fluid' | 'fluid' | title Element of tab sign in with E-mail |
open | boolean | false | visibility state if variant is "dialog" |
onClose | func | close function when click backdrop or close button | |
componentProps | { container?: { noBorder?: boolean } & BoxProps, textField?: TextFieldProps } | additions properties for component | |
config* | FSUIConfig | config values | |
translate | { key in TranslateKeys?: string } | translate dict |
Config
Prop | Type | Default | Description |
---|---|---|---|
providers | Array< 'google'| 'facebook'| 'apple'| 'twitter'| 'github'| 'microsoft'| 'yahoo' > | array of provider | |
callback* | func | Signature:function(user: User) => voidUser is prop from firebase/auth | |
onError | func | Signature:function(error:Error) => void |
Translate
Key |
---|
auth/auth-not-found |
auth/email-already-in-use |
auth/invalid-email |
auth/user-not-found |
auth/wrong-password |
Back |
ConfirmPassword |
ForgetPassword |
InvalidFormat |
Password |
Password8Chars |
PasswordNotMatch |
PleaseWait |
SendEmail |
SignIn |
SignOut |
SignUp |
const translate:{ [key in TranslateKey]:string } = {
"auth/auth-not-found": "ไม่พบ Auth",
"auth/email-already-in-use": "อีเมลได้ถูกใช้งานแล้ว",
"auth/invalid-email": "อีเมลไม่ถูกต้อง",
"auth/user-not-found": "ไม่พบผู้ใช้งานนี้",
"auth/wrong-password": "รหัสผ่านไม่ถูกต้อง",
"Back": "กลับ",
"ConfirmPassword": "ยืนยันรหัสผ่าน",
"Email": "อีเมล",
"ForgetPassword": "ลืมรหัสผ่าน",
"InvalidFormat": "ไม่ถูกต้อง",
"Password": "รหัสผ่าน",
"Password8Chars": "รหัสผ่านต้องมีอย่างน้อย 8 ตัวอักษร",
"PasswordNotMatch": "รหัสผ่านไม่ตรงกัน",
"PleaseWait": "กรุณารอสักครู่",
"SendEmail": "ส่งอีเมล",
"SignIn": "เข้าสู่ระบบ",
"SignOut": "ออกจากระบบ",
"SignUp": "สมัครสมาชิก"
}
License
MIT © caminkunick
1.0.0
2 years ago