All Projects → frontegg → frontegg-react

frontegg / frontegg-react

Licence: MIT License
Frontegg-React is pre-built Component for faster and simpler integration with Frontegg services.

Programming Languages

typescript
32286 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language
Makefile
30231 projects
HTML
75241 projects
Dockerfile
14818 projects

Projects that are alternatives of or similar to frontegg-react

React-Netflix-Clone
A Fully Responsive clone of Netflix website built using React.JS as a Front-end & Firebase as a Back-end.
Stars: ✭ 91 (+506.67%)
Mutual labels:  compound-components, react-hooks
text
Qiniu Text Processing Libraries for Go
Stars: ✭ 25 (+66.67%)
Mutual labels:  mit-license
react-sendbird-messenger
ReactJS (React-router-dom v6 + Antdesign + Firebase + Sendbird + Sentry) codebase containing real world examples (CRUD, auth, advanced patterns, etc).
Stars: ✭ 39 (+160%)
Mutual labels:  react-hooks
PsWebServer
Civet web server integration plugin for Unreal Engine 4
Stars: ✭ 24 (+60%)
Mutual labels:  mit-license
react-hooks-example
React Hooks Example
Stars: ✭ 21 (+40%)
Mutual labels:  react-hooks
Facebook-Messenger
This is a Facebook Messenger clone.You can comminicate to other at realtime.Used ReactJS, Material UI, Firebase, Firestore Database
Stars: ✭ 18 (+20%)
Mutual labels:  react-hooks
clana
CLANA is a toolkit for classifier analysis.
Stars: ✭ 28 (+86.67%)
Mutual labels:  mit-license
Yet Another Algorithms Repository
Beginner friendly repo for easily contributing algorithms' implementations
Stars: ✭ 31 (+106.67%)
Mutual labels:  mit-license
MetFlix
A Movie app demo. Like NetFlix ❤️
Stars: ✭ 50 (+233.33%)
Mutual labels:  react-hooks
window-scroll-position
React hook for Window scroll position
Stars: ✭ 81 (+440%)
Mutual labels:  react-hooks
Fakeflix
Not the usual clone that you can find on the web.
Stars: ✭ 4,429 (+29426.67%)
Mutual labels:  react-hooks
learn-react-typescript
Learning React contents with TypeScript (Hooks, Redux)
Stars: ✭ 15 (+0%)
Mutual labels:  react-hooks
slf4j-handroid
Android logging done right
Stars: ✭ 17 (+13.33%)
Mutual labels:  mit-license
react-hooks-file-upload
React Hooks File Upload example with Progress Bar using Axios, Bootstrap
Stars: ✭ 30 (+100%)
Mutual labels:  react-hooks
react-social-network
react social network
Stars: ✭ 13 (-13.33%)
Mutual labels:  react-hooks
bookworm-light
Bookworm is a clean and modern Hugo blog theme focused on high speed and support multiple authors.
Stars: ✭ 59 (+293.33%)
Mutual labels:  mit-license
psched
Priority-based Task Scheduling for Modern C++
Stars: ✭ 59 (+293.33%)
Mutual labels:  mit-license
react-change-highlight
✨ a react component to highlight changes constantly ⚡️
Stars: ✭ 79 (+426.67%)
Mutual labels:  react-hooks
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (+720%)
Mutual labels:  react-hooks
atomic-state
A decentralized state management library for React
Stars: ✭ 54 (+260%)
Mutual labels:  react-hooks

Frontegg React

alt text

Frontegg is a web platform where SaaS companies can set up their fully managed, scalable and brand aware - SaaS features and integrate them into their SaaS portals in up to 5 lines of code.

BREAKING CHANGES SINCE VERSION 3.0.0

The new @frontegg/react uses AdminPortal and LoginBox instead of multiple components.

Installation

Use the package manager npm to install frontegg React.JS library.

npm install @frontegg/react

Configuration

Wrap your application with Frontegg Provider:

import { FronteggProvider } from '@frontegg/react'

const contextOptions = {
  baseUrl: 'https://{HOST}.frontegg.com', // Your backend base URL (frontegg will direct the requests to it)
}

export const App = () => {
  return <FronteggProvider contextOptions={contextOptions}>
    {/*...*/}
  </FronteggProvider>
}

Usage

You can use React Hooks to access Frontegg store.

import { useAuthUser } from '@frontegg/react'

const HomePage = () => {
  const user = useAuthUser();

  return <div>
    Logged In user: {user.email}
  </div>
}

Opening the Admin Portal is available via the following code snippet.

import { AdminPortal } from '@frontegg/react'

const Toolbar = () => {

  return <nav>
    {/*... your application tabs ...*/}

    <button onClick={() => AdminPortal.show()}>
      Open Admin Portal
    </button>
  </nav>
}
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].