# fhir-smartr-redux
> fhir-smartr-redux React component
Latest version **0.0.54** (published 2018-04-05) · MIT license · 0 weekly downloads
## Install
```sh
npm install fhir-smartr-redux
pnpm add fhir-smartr-redux
yarn add fhir-smartr-redux
bun add fhir-smartr-redux
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.54 |
| Published | 2018-04-05 |
| First published | 2018-01-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 485 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | dlsnng |
| Keywords | react-component |
## Links
- npm: https://www.npmjs.com/package/fhir-smartr-redux
- Repository: https://github.com/DLSNNG/fhir-smartr-redux
- Homepage: https://github.com/DLSNNG/fhir-smartr-redux#readme
- Issues: https://github.com/DLSNNG/fhir-smartr-redux/issues
- npm.io page: https://npm.io/package/fhir-smartr-redux
## Dependencies (5)
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [fhirclient](https://npm.io/package/fhirclient.md) ^0.1.12
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.6
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.2.0
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
## Recent versions
- 0.0.54 (latest) — 2018-04-05
- 0.0.53 — 2018-04-05
- 0.0.52 — 2018-03-30
- 0.0.51 — 2018-03-30
- 0.0.50 — 2018-03-07
- 0.0.49 — 2018-03-07
- 0.0.48 — 2018-03-05
- 0.0.47 — 2018-03-05
- 0.0.46 — 2018-03-05
- 0.0.45 — 2018-03-05
- 0.0.44 — 2018-03-05
- 0.0.43 — 2018-03-05
- 0.0.42 — 2018-03-05
- 0.0.41 — 2018-03-05
- 0.0.40 — 2018-03-01
- … 39 more at https://npm.io/package/fhir-smartr-redux/versions
## README
# fhir-smartr-redux [](https://github.com/DLSNNG/fhir-smartr/blob/master/LICENSE) [](https://badge.fury.io/js/fhir-smartr-redux)
A set of React components that help tie the SMART on FHIR js library to a Redux store.
See example on plunker: [https://plnkr.co/edit/OrbOuy9WcqXaSBckuStB](https://plnkr.co/edit/OrbOuy9WcqXaSBckuStB?p=preview)
## Installation
### Node
```
npm install --save fhir-smartr-redux
```
Make sure to include a reference to the SMART on FHIR js library in your html so you have access to the API.
```html
```
### In the Browser (UMD)
```html
```
## Usage
### Define a Resource component with React
```javascript
class PatientResource extends Component {
render() {
// FHIR resources will be passed in as props.resource
const patient = this.props.resource;
const name = patient.name[0];
const address = patient.address[0];
return(
{ name.given[0] + ' ' + name.family }
{ address.line[0] }
)
}
}
```
### Perform a Query
```javascript
```
Results of the query will be saved in the Redux store under the provided namespace.
If an id is included in the query, a single resource will be returned.
Otherwise a bundle of resources will be returned.
### Display a FHIR Resource
```javascript
```
The Smart component will pass any data stored in the provided namespace to its child component.
The Resource component will then use that data to pass a FHIR resource as props.resource to it's child component.
### Display a list of FHIR Resources
```javascript
```
Similar to displaying a single FHIR resource, except ResourceList expects a Bundle and creates a list of the child components.
### Create a Search Form
```javascript
class PatientSearchForm extends Component {
render() {
let input;
return (
)
}
}
```
The Smart component will pass an onQuery(query) function to its children as child.props.onQuery. Use this to initiate queries in response to user actions, such as within search forms.
### Putting it all together
```javascript
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { Smart, SmartQuery, ResourceList, configureStore } from 'fhir-smartr-redux'
// Init the Redux store
const store = configureStore();
// Define a Patient search form component with React
class PatientSearchForm extends Component {
render() {
let input;
return (
)
}
}
// Define a Patient Resource with React
class PatientResource extends Component {
render() {
// The results of your Smart query will be passed as props.resource to this component
const patient = this.props.resource;
if(!patient) {
return {JSON.stringify(this.props)}
}
const name = patient.name[0];
const address = patient.address[0];
return(
{name.given + ' ' + name.family}
)
}
}
// Then use the Resource and Search components in the application
class App extends Component {
render() {
return (
)
}
}
ReactDOM.render(
,
document.getElementById('root')
);
```
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo
---
_Source: https://npm.io/package/fhir-smartr-redux · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._