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

react-icd10

v1.0.9

Published

Search the International Classification of Diseases table for classifying diagnoses for use in health care

Downloads

66

Readme

react-icd10

Search the International Classification of Diseases table

ICD-10-CM (International Classification of Diseases, 10th Revision, Clinical Modification) is a medical coding system for classifying diagnoses and reasons for visits in U.S. health care settings (source)

NPM

Install

# NPM
npm install --save react-icd10

# Yarn
yarn add react-icd10

You will need to have a react version that supports react hooks (v16.6+) to use this library, or you will receive errors.

Usage

To use the component version, import directly from react-icd10. The default export is a render prop component that exposes the necessary states to use on your interface, along with a few handy utilities:

import React from 'react'
import ReactICD10 from 'react-icd10'

const App = () => (
   <ReactICD10
    render={({
      onSearch,
      fetching,
      fetched,
      fetchError,
      data,
      reset,
    }) => (
      <div className='container'>
        <input
          onChange={(e) => onSearch(e.target.value)}
          type='text'
          placeholder='Search diagnosis'
        />
      </div>
    )}
  />
)

export default App

You can limit the results returned by passing in a limit prop to the render component. For example, passing in a limit of 100 will return a maximum of 100 results:

const App = () => (
   <ReactICD10
    limit={100}
    render={({
      onSearch,
      fetching,
      fetched,
      fetchError,
      data,
      reset,
    }) => (
      <div className='container'>
        <input
          onChange={(e) => onSearch(e.target.value)}
          type='text'
          placeholder='Search diagnosis'
        />
      </div>
    )}
  />
)

If you need an additional constraint to return results that must include a second keyword somewhere in each result, you can pass in include and your keyword to it:

const App = () => (
   <ReactICD10
    include="medicine" // Will also take an array of strings 
    render={({
      onSearch,
      fetching,
      fetched,
      fetchError,
      data,
      reset,
    }) => (
      <div className='container'>
        <input
          onChange={(e) => onSearch(e.target.value)}
          type='text'
          placeholder='Search diagnosis'
        />
      </div>
    )}
  />
)

You can either use the render prop component version that is exported as default, but you can optionally use the react hook version instead which is basically the same flow:

import React from 'react'
import { useICD10 } from 'react-icd10'

const App = () => {
  const { onSearch, ...rest } = useICD10({ limit: 7 })

  const onChange = (e) => {
    onSearch(e.target.value)
  }

  return (
    <div className='container'>
      <div className='content'>
        <pre>
          <code>{JSON.stringify(rest, null, 2)}</code>
        </pre>
        <div>
          <input
            onChange={onChange}
            type='text'
            placeholder='Search diagnosis'
          />
        </div>
      </div>
    </div>
  )
}

export default App

Methods

onSearch: (keyword: string) => Promise

onSearch will use your keyword to query for diagnoses. After the call has finished, data will be provided as arguments to the render prop. The data is an object that with this shape:

interface Data {
  codes: string[]
  results: { [code: string]: ICD10Object, ...others }
  total: number
}

interface ICD10Object {
  code?: string
  description?: string
  comment?: string
}

For those who would like to see it from a visual perspective:

react-icd10 international classification of diseases library

If an error occurred while fetching for the results, fetchError will be returned as an Error object as part of the render props.

onSearch is also optimized internally to avoid duplicate requests, so you can assure that users who are constantly typing for results won't be making mass amounts of requests in between.

reset: () => void

If you need to reset your results back to an empty state, you can call reset, provided from render props as well.

Dependencies

  • axios

License

MIT © pfftdammitchris