npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@praktice/navigator-react-web-sdk

v0.0.5

Published

Navigator-Development

Downloads

1

Readme

Praktice-Navigator React-webSDK

NPM NPM NPM NPM

Table of contents

Minimum required version of react 16.3.x

To use navigator SDK you must have ClientID.

In case you do not have a client ID, please write to [email protected]

Importing SDK and rendering host component

import { NavigatorSDK } from 'praktice-navigator-react-web-sdk'
export default class App extends React.Component {
  render() {
    return (
		<NavigatorSDK
			clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
		/>
	)}
}

This will load SDK with all default UI Component, but can also pass your own component to SDK and render it.

Getting started with $Generator

$Generator is required for accessing the dynamic data and methods of SDK, and it can be imported like

import ${Generator} from '@praktice/navigator-react-web-sdk'

every time you invoke $Generator you have to pass request object to generate data from it

Format of requestObject

{
	type: "categoryTitle" 
 	component: Button 
    componentProps: [ 
    	{style: {fontWeight: "bold"}}, //React native style only
        "fullWidth"	//Custom props
    ]
}

| key |data type |description | | ---- | -------- | ---------- | | type | string, required | Unique for every component, see in component section | | component | class, optional | Data will be wrapped in this component, if it is null then data will be render in it's native component | |componentProps | array, optional |Props to the above component, array can only contain either string or object| |payload|string/int/array/object|Payload to dynamic method. Please check component documentation for detail. |

Example of genrating Symptoms list

var requestObject =  {
     type: "categoryList",
     component:Button,
     componentProps: [
       {style: {fontWeight: "bold"}},
       "fullWidth",
       "bordered"
     ]
 }
 
const ListData = $Generator(requestObject) // return the UI element List

Getting started with PrefetchAPIReuqest

PrefetchAPIReuqest is function which can be called in background during splashscreen, to reduce the time of first category render. return-type: Boolean

   PrefetchAPIReuqest({ clientId: "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" })
   .then(console.log)

Available props to Navigator

Passing Custom component to NavigatorSDK component

  • List of Component can be passed to NavigatorSDK

    |Component (type)| Status | Description | | - | - | - | |searchComponent|working| Repalces the search component| | categoryComponent | working | component in which all symptoms are render | | errorMessageComponent | working | This component get render when thier is an error on backend side | |showDocBtn|working| In this you can call $Generator to obatin the result. | |patientInfoQueryComponent| working|Component which collect user data, like age and gender | |loader| working| Custom loader inside the sdk Category Component -

    <NavigatorSDK
        clientId = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
        categoryComponent={CustomCategoryComponent}
        patientInfoQueryComponent={CustomPacientInfoQueryComponent}
        showDocBtn={CustomShowDocComponent}
        errorMessageComponent={CustomErrorComponent}
        loader={CustomLoaderComponent}
    />

Import Autocomplete

Autocomplete can be imported and rendered by the $Generator

const AutoComplete = $Generator({type:"autoComplete"})

<AutoComplete
    query={this.state.inputvalue}
	  onSelect={(e) => {this.setState({inputvalue: e})}}
    containerStyle={...}
    listStyle={...}
/>

|props|type|description| |-|-|-| |query|string, required| value of input| |onSelect| func, required| this callback function will fire when the user will select any suggestion from autocomplete, developer are advised to use this callback to set the value of input| |containerStyle|Object, optional| These styles will be applied to the container which surrounds the autocomplete component.| |listStyle|Object, optional|These style will be applied to the result list.

Custom Styling of SDK Component

Currently four component support custom styling to the SDK component, but before you proceed to this step, developer's are advised to see the component layout.

See Component Layout

|Component|Prop name|Available keys for style object, all keys are optional | |-|-|-| |SDK Container|sdkContainerStyle| wrapperwrapper_msectAsectA_msectA_containersectA_container_mselectedselected_msectBsectB_msearch_button_wrappersearch_button_wrapper_msearch_buttonsearch_button_mselectedSymptoms| |Category Component|categoryComponentStyle| category_wrappercategory_wrapper_mtitleCategorytitleCategory_msymptoms_wrappersymptoms_wrapper_msymptomssymptoms_msymptoms_selectedsymptoms_selected_m| |Selected SymptomsComponent|selectedSymptomsStyle|Flat style object (no keys, just react style)| |selectedSymptomsCrossStyle| selectedSymptomsCrossStyle|Flat style object| |Input Component Style|inputComponentStyle| Flat style Object| |AutoComplete Component Style| autoCompleteComponentStyle | containerStylelistStyle

<NavigatorSDK
	clientId = ""
    errorComponent={ErrorComponent}
    patientInfoQueryComponent={PacientInfoQuery}
    showDocBtn={CustomShowDocBtn}
    loader={CustomLoaderComponent}
    // Custom Style Object to tune the native component style.
    sdkContainerStyle = {customContainerStyle}
    categoryComponentStyle={customCategoryStyle}
    inputComponentStyle={cusotmInputComponentStyle}
/>


const customCategoryStyle = {
  symptoms_selected_m: {
    color: "white",
    fontSize: "0.8rem",
    fontWeight: "600",
    fontFamily: "sans-serif",
    cursor: "pointer"
  },
  symptoms_selected: {
    color: "white",
    fontSize: "0.8rem",
    fontWeight: "600",
    background: "red"
  }
};
const customContainerStyle = {
  sectA: {
    background: "red",
    display: "flex",
    height: "-webkit-fill-available",
    padding: "1rem",
    maxWidth: "300px"
  }
};

// Flat style object
const customInputComponentStyle = {
  margin: "5px",
  border: "4px solid #efefef"
}
  

Your style object must comply with the rules of react style object

Utility Props

|Props Key | data type| description| |-|-|-| |patientGender| string female or male | If this prop is passed to navigator SDK then, SDK will never ask for the patient gender from the user, it will use the provided value when needed. |patientAge|int|If this prop is passed to navigator SDK then, SDK will never ask for the patient age from the user, it will use the provided value when needed. |maximumNumberOfCategories| int| This limits the number of Category to be render. |maximumTermsPerCategories|int| This is limit the numbder of terms/symptoms in one category. |permitEmptySelection| boolean| If set true, then SDK will not disable the SEARCH DOCTORS Button when there is no symptoms selected. and if user clicks without selecting any symptoms SDK will respond with General Physician

Custom Listner for Seacrh Doctors

In some cases, where the related symptoms won't exist (example - treatment like a Muscle Biopsy or condition like Non Hodgkin's Lympoma, SDK would directly invoke the listener if the listner is passed as a prop. Otherwise, in such cases, where no related symptoms exist, SDK would not render any medical terms in the category component.

<NavigatorSDK
  clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
  searchDoctorlistner={this.customListner}
>

customListner(resultData){
  console.log("Hmm... no more option ..time to navigate to", resultData)
}

Rendering Custom components in SDK

  • Search Component

    This component does not require any dynamic data to render but require only two method from SDK, one to submit the patient query back to SDK and other to render autocomplete

     $Generator({type:"inputSearch",payload: "I have a leg pain"})

    For AutComplete

    const AutoComplete = $Generator({type:"autoComplete"})
    <AutoComplete
      query={this.state.inputvalue}
      onSelect={(e) => {this.setState({inputvalue: e})}}
      containerStyle={...}
      listStyle={...}
    />

    |props|type|description| |-|-|-| |query|string, required| value of input| |onSelect| func, required| this callback function will fire when the user will select any suggestion from autocomplete, developer are advised to use this callback to set the value of input| |containerStyle|Object, optional| These styles will be applied to the container which surrounds the autocomplete component.| |listStyle|Object, optional|These style will be applied to the result list.

  • Category Component

    Component Layout

    Dynamic data available for this component
    | Data |type|return type | provides | | ----- |--| ---------- | ---------| |Category Title| categoryTitle | single UI element | Category Title, example: Comman Health Prombelm, Bone & Joint problems | |Symptoms List| categoryList | List of UI Element | Symptoms List, example: Leg pain, Stress |

    Getting Dynamic data

    const CategoryTitle = $Generator({
       type: "categoryTitle",
       component: Text,
       componentProps: [{ style: { fontWeight: "bold" } }]
     });
    const SymptomsList = $Generator({
        type: "categoryList",
        component:Button,
         componentProps: [
              {style: {fontWeight: "bold"}},
              "fullWidth",
              "bordered"
            ]
        })
    
    //Rendering the data
    //below whole class component is repetitive section as represented in image
    export class CategoryComponent extends React.Component{
       render(){
       return(
           <View>
              <CategoryTitle/>
               <SymptomsList/>
           </View>
         )}
      }
  • Patient Info Component

    This component does not require any dynamic data to render but require only one method from SDK to submit the patient data

     $Generator({type:"submitPatientInfo",debug:true})(true, "female", "26")
  • Show Doc Button

    This component will replace the native button of Show Doctor in SDK, this component does not require any dynamic data to be render but has one method to obtain the result in json format from SDK.

    Developer is responsible to navigate further on the basis of result. SDK will not navigate further, and spinner will continue.

    $Generator({type:"showSpeciality"})
  • Error Component

    This component does not require any dynamic data or method from SDK, it will render on screen if any error logs up either on front-end side or on the back-end side

    currently there is no provision of detecting the error type, but in future it will have an error code and error message for developer

  • Loader Component

    This Component does not require any dynamic data or method from SDK, it will replace the native loader of SDK.