Use shared components library

A package library that share react components for both web extension and mobile extension.

Shared components library is a way for you to write reusable components for both web extension and mobile extension modules in the Skedulo package.

This could include additional scheduling information or organization data that you want to access from those pages in the web application.

As both the web and mobile extension modules are web view-based, they both can utilize the front-end components of the library.

  1. Open your Skedulo package in the Skedulo Packages SDK to generated a library. See the Getting started with libraries for detailed instruction.

  2. You can then add and export React components just like a React module.

    Add a (component) directory into your library’s (src) directory located. This directory will contain all the type exported React Components that can be imported from the Skedulo library for mobile and web extension to use.

    For example, we want to export the component for a Checkbox:

    import * as React from 'react'

interface Props {
caption: string
value: boolean
onChange: (val: boolean) => void
disabled?: boolean
}

const Checkbox: React.FC<Props> = ({caption, value, disabled, onChange}) => {
const name = caption.replace(/ /g, '_');

const inputChange = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
   onChange(e.target.checked)
}, [onChange])
   return (
      <div className="form-element__multiple form-element__multiple--checkbox">
      <input type="checkbox" checked={value} onChange={inputChange} id={name}  disabled={disabled}
               className={'form-element__multiple-input form-element__multiple-input--checkbox' + (disabled ? 'disabled' : '')} />
      <label className="form-element__multiple-label form-element__multiple-label--checkbox" htmlFor={name}>{caption}</label>
      </div>
   )
}

export default React.memo(Checkbox)

  3. You can then add and export stylesheet to bundle with the library.

    Add a (stylesheet) directory into your library directory. This directory will contain all the stylesheets that can be imported from Skedulo library for mobile and web extension to use.

    For example, we want to import a stylesheet like so:

    import "share_component/stylesheets/sass/skedulo-mobile.scss"