User

This user package provides various user related components.

Design & API Documentation

User Menu Demo

Pattern library

Installation

npm install @bnnvara/user --save

Basic Usage

Components

UserMenu

This dumb component can be enhanced with other components in this package.

import UserMenu from '@bnnvara/user';

const handleLogin = () => {};
const handleLogout = () => {};

<UserMenu
    loggedIn
    nickname="my-nickname"
    name="My Name"
    icon={<img src="./avatar.png" />}
    onRequestLogin={handleLogin},
    onRequestLogout{handleLogout},
/>

Dropdown & DropdownItem

This dumb component can be used to generate the dropdown menu in the user menu.

import { Dropdown, DropdownItem } from '@bnnvara/user';

<Dropdown 
    title="My title" 
    subtitle="My subtitle"
>
    <DropdownItem
        href="/profile"
        target="_parent"
        icon={<ProfileIcon />}
        label="My profile"
        onClick={() => {}}
    />
</Dropdown>

UserContextProvider

This component provides the UserContext to all children. It should preferably be wrapped in the root of the <App />.

import { Component } from 'react';
import { UserContextProvider } from '@bnnvara/user';

class App extends Component {
    render() {
        return (
            <UserContextProvider>
                <MyAwesomePage>
            </UserContextProvider>
        );    
    }
}

Containers

UserMenuContainer

This component provides the data for <UserMenu />. It is however dependent on a parent component which is responsible for doing the actual login/logout functionality. For example, the withGigya HOC can be used to provide Gigya login/logout functionality.

The default 'login' icon can also be customised, so the Hub and the Portal can have a different icon.

import { UserMenuContainer } from '@bnnvara/user';

<UserMenuContainer
    defaultIcon={<PortalIcon />}
    userData={{
        loggedIn: true,
        nickname: "MyNickName",
        name: "My name",
        avatarSrc: "./avatar.png",
    }}
    onRequestLogin={() => {}},
    onRequestLogout=(() => {}),
/>

Higher Order Components

withUserContext

This Higher Order Component provides the wrapped component with UserContext.

const MyComponent = ({ nickname }) => <p>Hello {nickname}</p>;

const MyComponentWithUserContext = withUserContext(MyComponent);

withGigya

This Higher Order Component provides the wrapped component with gigya login/logout functionality and user data relevant for the BNNVARA domain.

const MyComponent = ({ userData, onRequestLogin, onRequestLogout }) => (
    <div>
        User data: {JSON.stringify(userData}}
        
        <button onclick={onRequestLogin}>Login</button
        <button onclick={onRequestLogout}>Logout</button
    </div>
);

const MyComponentWithGigya = withGigya({
    apiKey: 'my-api-key',
}, MyComponent);