# react-orbitjs

> React.js bindings for Orbit.js

Latest version **0.3.5** (published 2022-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-orbitjs
pnpm add react-orbitjs
yarn add react-orbitjs
bun add react-orbitjs
```

## 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.3.5 |
| Published | 2022-05-18 |
| First published | 2017-11-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 146.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 32 |
| Author | Joram van den Boezem |
| Maintainers | hongaar, michiel87, stefanwullems |
| Keywords | react, orbitjs |

## Links

- npm: https://www.npmjs.com/package/react-orbitjs
- Repository: https://github.com/exivity/react-orbitjs
- Homepage: https://github.com/exivity/react-orbitjs#readme
- Issues: https://github.com/exivity/react-orbitjs/issues
- npm.io page: https://npm.io/package/react-orbitjs

## Dependencies (2)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.5 (latest) — 2022-05-18
- 0.3.4 — 2022-04-20
- 0.3.3 — 2022-01-16
- 0.3.2 — 2022-01-05
- 0.3.1 — 2021-12-23
- 0.3.0 — 2021-08-03
- 0.2.4 — 2021-06-07
- 0.2.3 — 2021-05-10
- 0.2.2 — 2021-02-16
- 0.2.1 — 2020-09-21
- 0.2.0 — 2020-07-17
- 0.1.18 — 2019-09-25
- 0.1.17 — 2019-09-12
- 0.1.16 — 2019-09-10
- 0.1.15 — 2019-09-04
- … 15 more at https://npm.io/package/react-orbitjs/versions

## README

react-orbitjs
=============

[![npm](https://img.shields.io/npm/v/react-orbitjs.svg)](https://www.npmjs.com/package/react-orbitjs)
[![ci](https://github.com/exivity/react-orbitjs/actions/workflows/ci.yml/badge.svg)](https://github.com/exivity/react-orbitjs/actions/workflows/ci.yml)
[![Codecov](https://img.shields.io/codecov/c/github/exivity/react-orbitjs.svg)](https://codecov.io/gh/exivity/react-orbitjs)
[![Code Climate](https://img.shields.io/codeclimate/maintainability/exivity/react-orbitjs.svg)](https://codeclimate.com/github/exivity/react-orbitjs)

[React](https://reactjs.org/) bindings for [Orbit](http://orbitjs.com/).

This package attempts to make it easier to work with
[Orbit.js](http://orbitjs.com/) in a [React](https://reactjs.org/)
environment. In a nutshell it's a transform listener, updating
a component props with records as they are changed. If you're familiar
with [redux](https://github.com/reactjs/redux/) in combination with
[react-redux](https://github.com/reactjs/react-redux), you already know
how to use this package.

---

### [Documentation & Demo](https://exivity.github.io/react-orbitjs/)

---

A big thank you to the author and contributers of the popular
[react-redux](https://github.com/reactjs/react-redux) package, as
react-orbitjs is largely based on their code.

Installation
------------

_react-orbitjs requires Orbit 0.16.x or 0.17.x._

_npm_

```
npm install --save react-orbitjs
```

_yarn_

```
yarn add react-orbitjs
```

API
---

### `<DataProvider/>`

```jsx
const store = new MemorySource({schema})

// Simply pass a reference to your Orbit store to the <DataProvider/> component
// and wrap your root App component. The provider makes a dataStore child
// context available to all children, which is consumed by the HOC generated
// with the withData() connector.
ReactDOM.render(
  <DataProvider dataStore={store}>
    <App/>
  </DataProvider>,
  rootElement
)
```

### `withData()`

```jsx
// This mapper uses the props passed in to manipulate the queries. Useful for
// sort/filter functions, etc.
const mapRecordsToProps = (ownProps) => {
  return {
    planets: q => q.findRecords("planet").sort(ownProps.sortBy),
  }
}

// Or use a simple object if you don't use the props in your queries.
const mapRecordsToProps = {
  planets: q => q.findRecords("planet"),
}

// Export the generated component. Your <Planetarium/> component receives all
// the props you pass to the wrapper component, combined with the results from
// the queries defined in the mapRecordsToProps function or object, and
// convenience queryStore and updateStore props, which defer to store.query and
// store.update.
export default PlanetariumWithData = withData(mapRecordsToProps)(Planetarium)
```

License
-------

MIT

---
_Source: https://npm.io/package/react-orbitjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._