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)
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:
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