Context
Most data in our app should be placed in local state if possible. However, some data (e.g. locale preference, UI theme) are required by many components within an app.
If we decide to keep those data in local state, we have to place them at the root component of our app so we can pass those data through the component tree but this has to be done manually at every component level.
The better way is using context
which provides a way to pass data through the component tree without having to pass props down manually.
Built-In Contexts
Fortunately, NextWeb.js comes with some useful built-in contexts that will make your life easier and you can access them using react hooks.
useUA()
There are some useful information NextWeb.js extracted from user agent:
Name | Description |
---|---|
isMobile | Is the device a mobile ? |
isTablet | Is the device a tablet ? |
isDesktop | Is the device a desktop ? |
isIE | Is the browser of the device an Internet Explorer ? |
For example:
import React, { useContext } from 'react'
import { useUA } from '@lib/userAgent'
function MyComponent() {
const { device: { isMobile } } = useUA()
return (
<div>
{ isMobile ? <MobileUI /> : <DesktopUI /> }
</div>
)
}
useMember()
You can access authentication data of a user easily using this react hook:
import React, { useContext } from 'react'
import { useMember } from '@lib/auth'
function MyComponent() {
const { isAuthenticated } = useMember()
return (
<div>
{isAuthenticated ? <DashboardPage /> : <LoginPage /> }
</div>
)
}
See more detail about authentication data in Authentication section