Dw-global-nav NPM

DW Global Navigation

A package to load DWs global navigation onto any site and allow users to authenticate and pass tokens to the main site via Cookies.

Before you get started

Before starting make sure to following the following steps:

Install project dependencies, run:

npm install.

Link the npm package locally, run:

npm link NOTE: In some instances global access is required so try running the command with admin access: sudo npm link

Open another React project and link the package, run:

npm link dw-global-nav

A known error of npm link is the conflict of dependencies, to solve, in the package, run:

npm link ./path-to-second-react-project/node_modules/react

This will tell the package to use react from your project instead of its dependencies.

Import the package as if it was installed:

...
import DWGlobalNav from 'dw-global-nav';

...

<DWGlobalNav {...{
    onLogout: () => {
      console.log("onlogout")
    },
    onLogin: (tkn) => {
      console.log("onlogin", tkn)
    },
    onPracticeChange: (user_data) => {
      console.log("onPracticeChange", user_data)
    },
  }
} />

Local Development

To compile your code once, run

npm run build.

To compile your code once and refresh on file change, run

npm run start.

Properties

Option	Type	Default	Description
theme	string	"light"	Defines styling of the component. Accepted values are `light` and & `dark`
api_url	string	prod env api url	Declares what url to call to fetch user info after authentication
auth_url	string	prod env auth url	Declares what url to call to connect to the authentication server
orca_url	string	prod env orca url	Declares what url to navigate for settings and handling practice

Events

Option	Type	Default	Description
onLogin	function	n/a	Triggered when the user is authenticated.
onLogout	function	n/a	Triggered when the user logs out.
onPracticeChange	function	n/a	Triggered when the user changes location manually.

How to publish

To publish your package to npm, make sure you're logged in the correct account by running

npm login.

Update the package version accordingly by using

npm version [patch | minor | major]

Finally run:

npm run launch

This will automatically build and publish the project.

To use in a non-react project

Add the following script and html to your project

    <div id="dw_gn"></div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/dw-global-nav@latest/dist/cdn.js" defer></script>

React and ReactDOM are currently necessary to import but we are trying to have them included as package dependencies and remove these imports in the future.