Nexus-widgets NPM

Nexus widgets

Easy to integrate react authentication management through context. Easy to integrate header into your nexus apps

Features

Dead simple to integrate
Properly memoized authenticated attribute that can be consumed by your app

Install

$ yarn add nexus-widgets

Usage

Add AuthProvider somewhere towards the top of your tree.

// _app.tsx
import React from 'react';
import { AuthProvider} from "nexus-widgets";

function App() {

  return (
    <AuthProvider>
        <Component {...pageProps} />
    </AuthProvider>
  );
}

You can get authentication and user's photo infomation from AuthContext

// index.tsx
import React from 'react';
import { AuthContext} from "nexus-widgets";

const Home: NextPage = () => {
    const { authenticated } = React.useContext(AuthContext);
    React.useEffect(() => {

    }, [authenticated]);
    return (
        <div className="bg-white">
            <Head>
                <title>Nexus Generator</title>
                <link className='stroke-1' rel="icon" href="./nexus1.png" />
            </Head>
            <Nexus />
        </div>
  )
}

// layout.tsx
import React from 'react';
import { AuthContext} from "nexus-widgets";

const Layout = () => {
    const { userPhotoURL } = React.useContext(AuthContext);
    React.useEffect(() => {

    }, [authenticated]);
    return (
        <div className="bg-white">
            <Header
                avatar={userPhotoURL}
            />
        </div>
  )
}

Integrate setAuthenticated into your login and logout flow, here is an example of a login flow:

// Login.tsx
import React from 'react';
import { AuthContext } from "nexus-widgets";

function Login(props: RouteComponentProps) {
  const { setAuthenticated } = React.useContext(AuthContext);
  return (
    <button type="button" onClick={() => setAuthenticated(true)}>
      Login
    </button>
    <button type="button" onClick={() => setAuthenticated(false)}>
      Logout
    </button>
  );
}

Integrate setUserPhotoURL into your user photo update logic:

// Profile.tsx
import React from 'react';
import { AuthContext } from "nexus-widgets";

function Profile () {
  const { setUserPhotoURL } = React.useContext(AuthContext);
  return (
    <button type="button" onClick={() => setUserPhotoURL(url)}>
      Save user
    </button>
  );
}

Integrate header component to your app:

// Layout.tsx
import React from 'react';
import {Header, AuthContext} from "nexus-widgets"

function Layout(props: RouteComponentProps) {
  const { userPhotoURL } = React.useContext(AuthContext);
  const handleMenu =()=>{
  }
  const handleInputChange =(value)=>{
  }
  return (
    <main>
        <div className="contentArea">
            <Header
                id = {"ads"}
                avatar={userPhotoURL}
                handleMenu={handleMenu}
                handleInputChange={handleInputChange}
            />
            <div fluid>
            <div>{children}</div>
            </div>
        </div>
    </main>
  );
}

react typescript awesome-project

@everything-registry/sub-chunk-2270

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago