nexus-widgets
v0.1.8
Published
My first package
Downloads
51
Maintainers
smith313428Readme
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-widgetsUsage
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>
);
}