Comment on page
🍜
Component Library
https://github.com/Othent/react-components
The Othent component library is a collection of components that enable interaction with the Othent protocol.
To use the library in your project, you can install it using:
npm i @othent/react-components
To use the library, you can import it into your project:
import { OthentLogin } from '@othent/react-components'
The following components are available in the Othent React Components library:
Main component that handles all the logic with the Othent SDK.
// Main login component
import { OthentLogin } from "@othent/react-components";
const myLogin = () => <OthentLogin apiId="YOUR_API_ID"/>
This component uses the rest of the components as building blocks, it's probably the only one you need.
When a user is not logged in, it shows the LoginButton
When the user is logged in, it shows its Avatar. Upon clicking the Avatar, it shows a small Modal with the user info and a LogoutButton. The location of this Modal is customizable with the location attribute:
// Import ModalLocation to select the modal placement
import { OthentLogin, ModalLocation } from "@othent/react-components";
// Pass one of ModalLocation's members as attribute:
const myCustomLogin = () =>
<OthentLogin location={ ModalLocation['top-left'] } apiId="YOUR_API_ID"/>
ModalLocation members include: center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right
Small component to show the profile picture of the user or the first letter of its name in case there's no profile picture.
// Avatar component
import { Avatar } from "@othent/react-components";
const myAvatar = () => <Avatar username="John" src="img-URL" />
The src attribute receives a URL for the profile image shown as avatar. If the URL is not valid, the Avatar shows the first letter of the username upon a plain background.
Button with the Othent styling to use as a login button. It has an onlogin attribute that receives a callback function to be able to return the LogInReturnProps with user data from the logIn() function in the Othent SDK.
// LoginButton component
import { LoginButton } from "@othent/react-components";
import { type LogInReturnProps } from "othent";
const onlogin = (user: LogInReturnProps) => console.log(user);
const myLoginButton = () =>
<LoginButton onlogin={onlogin} apiId="YOUR_API_ID" />
Button to use as a logout button. It has an onlogout attribute that receives a callback function to be able to return the LogOutReturnProps from the logOut() function in the Othent SDK.
// LogoutButton component
import { LogoutButton } from "@othent/react-components";
import { type LogOutReturnProps } from "othent";
const onlogout = (response: LogOutReturnProps) => console.log(response);
const myLogoutButton = () =>
<LogoutButton onlogout={onlogout} apiId="YOUR_API_ID"/>
This is a simple component to display a parent element that, upon being clicked, shows a Modal element containing children. This Modal is placed in a location relative to the parent element, with 9 possible positions defined by the ModalLocation enum.
// Modal component
import { Modal, ModalLocation } from "@othent/react-components";
const parent = <button>Click me</button>;
const children = <p>we are the children</p>;
const myModal = () => <Modal parent={ parent }>{children}</Modal>
// Optionally, pass one of ModalLocation's members to customize location:
const customLocation = ModalLocation['bottom-left'];
const myCustomModal = () =>
<Modal parent={ parent } location={ customLocation }>
{children}
</Modal>
ModalLocation members include: center, top, bottom, left, right, top-left, top-right, bottom-left, bottom-right.
This is a basic component to show info from a user. It shows the profile picture using the Avatar component on the left, while on the right it shows the user's name above the user's email.
// UserInfo component
import { UserInfo, LoginButton } from "@othent/react-components";
import { type LogInReturnProps } from "othent";
import { useState } from 'react';
const [userData, setUserData] = useState<LogInReturnProps | null>(null);
const onlogin = (user: LogInReturnProps) => setUserData(user);
const myUserInfo = () => {
return !userData ? (
<LoginButton onlogin={ onlogin } />
) : (
<UserInfo userdata={ userData } />
)
}
Last modified 6mo ago