# @catastrophee/models

> Mobx models for the web

Latest version **0.0.2** (published 2020-02-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @catastrophee/models
pnpm add @catastrophee/models
yarn add @catastrophee/models
bun add @catastrophee/models
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2020-02-13 |
| First published | 2020-02-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 145.9 KB |
| Known vulnerabilities | 0 (+27 in 3 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Stephani Moroni Bishop |
| Maintainers | stephy |

## Links

- npm: https://www.npmjs.com/package/@catastrophee/models
- Repository: https://github.com/stephy/catastrophee
- Homepage: http://castastrophee.com
- Issues: https://github.com/stephy/catastrophee/issues
- npm.io page: https://npm.io/package/@catastrophee/models

## Dependencies (5)

- [mobx](https://npm.io/package/mobx.md) ^5.10.1
- [uuid](https://npm.io/package/uuid.md) ^3.3.2
- [axios](https://npm.io/package/axios.md) ^0.19.0
- [js-cookie](https://npm.io/package/js-cookie.md) ^2.2.0
- [mobx-utils](https://npm.io/package/mobx-utils.md) ^5.4.1

## Recent versions

- 0.0.2 (latest) — 2020-02-13

## README

# Getting started with Catatrophee Models

## Install dependencies

```
npm install -s @catastrophee/models
```

or

```
yarn add @catastrophee/models
```

Catastrophee models have mobx as a dependency, mobx should be installed automatically when you install @catastrophee/models, but in case it doesn't, please install mobx.

```
npm install --save mobx
```

# How to use it

You can use Catastrophee models in two different ways.

1. With an already existing model or any other javascript code, including node when it is not browser dependant\*
2. On your component

\*_Browser dependant models can attach event listeners or need the window object, when you are using node, most likely those are not going to be available_

## With existing model

Simply import the model of your choice and use it as you would any other model.

## On your components

### Make your component observable

In order for your component to render with the lastet synchronized changes, it needs to be active listening when data changes on your model. In order for that to happen you need to wrap your component in an observer. The observer helper is available from 'mobx-react' (note: not mobx)

### Install mobx-react

```
npm install --save mobx-react
```

On your component, import mobx-react and wrap the component on a observer

### For class based components

```js
import { observer } from 'mobx-react';

@observer
export class MyComponent extends React.Component {
  ...
}
```

### For functional components

```js
import { observer } from 'mobx-react';

export const MyComponent = observer(({ props }) => {
  ...
})
```

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