Laerdal LIFE component library for React

How to use @laerdal/life-react-components

• Add the package to your project:
  • cd /path/to/your-app
  • yarn add @laerdal/life-react-components or npm add @laerdal/life-react-components
• Required providers:

  • There are several providers required for Life React JS components to work as expected. You need to wrap your APP with all of them:

  • ThemeProvider This is default ThemeProvider from styled-components package. It should define the theme. 'Theme' object should be provided, even it if is just blank object. Theme object can contain name of the theme. Acceptable values: dark, light, rqi_dark, rqi_light. Also ThemeProvider can be used to override colors of the theme.

  • ToastProvider Provider with Toast related context. Wrap your whole app with this if you want to have ability to show/hide Toasts using Life React JS

  • NavigationProvider NavigationProvider - provides library components with navigation, routing and active-route functionality. It has 3 functions:

    navigate?: (path: string, isExternal: boolean) => void;	
    Navigate to a different path. If navigation is happening to the external source, please set 'isExternal' to true.
    	
    currentPath?: string | undefined;
    Current path in the navigation context.
    	
    isActiveRoute?: (url: string, exact: boolean) => boolean;
    Check if a route is active, if 'exact' flag is set then we should check for exact match, and not just part of the route

    If you are still using React Router and don't want to remove it from list of your dependencies, you can find implementation of CustomNavigationProvider at https://github.com/Laerdal-Medical/dcs-life-react-js/blob/dev/libraries/react-components/.storybook/custom-navigation-provider.tsx <- this implementation is used at Storybook.

  • LifeGlobalStyles React component that should be placed in the App.tsx of your project. This component will include coloring for chosen theme and add global styles like fonts and others.

After adding all providers defined about you can include components or icons and use them.

• Import components in your code:
  • import { TextButton } from '@laerdal/life-react-components'
• or icons:
  • import { ChevronLeft, ChevronRight } from '@laerdal/life-react-components'

How to use a local version of @laerdal/life-react-components

• Pull the latest version of @laerdal/life-react-components from Bitbucket.
• If you have not already, add @laerdal/life-react-components to your application:
  • cd /path/to/your-app
  • yarn add @laerdal/life-react-components or npm add @laerdal/life-react-components
• Create a link from your-app to component-library
  • cd /path/to/react-components
  • yarn link
  • cd /path/to/your-app
  • yarn link “@laerdal/life-react-components”
  • yarn

Invalid hook call warning

When you start your application, you might get an “Invalid Hook Call Warning”. This is because both component-library and your-app loads their own version of react and react dom. Make sure component-library uses the same version of react and react-dom as your-app uses:

• npm add npm-link-shared -g
• cd /path/to/your-app
• sudo npm-link-shared /path/to/react-components/node_modules . react react-dom

Storybook

Storybook is added to the component library package to demo and document the components. Clone the repository, run yarn, then cd apps/storybook and run yarn storybook to start it locally.