# omis

> 1kb store system for React/Preact apps.

Latest version **2.2.1** (published 2019-11-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install omis
pnpm add omis
yarn add omis
bun add omis
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2019-11-19 |
| First published | 2017-02-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 144.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13273 |
| Author | dntzhang |
| Maintainers | dntzhang |
| Keywords | omis, omi, webcomponents, jsx, proxy, preact, react, virtual dom, vdom, components, virtual, dom |

## Links

- npm: https://www.npmjs.com/package/omis
- Repository: https://github.com/Tencent/omi
- Issues: https://github.com/Tencent/omi/issues
- npm.io page: https://npm.io/package/omis

## Dependencies (1)

- [react](https://npm.io/package/react.md) ^16.10.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 2.2.1 (latest) — 2019-11-19
- 2.2.0 — 2019-10-19
- 2.1.0 — 2019-10-09
- 2.0.5 — 2019-10-05
- 2.0.4 — 2019-10-05
- 2.0.3 — 2019-10-02
- 2.0.2 — 2019-10-02
- 2.0.1 — 2019-10-02
- 2.0.0 — 2019-10-02
- 1.0.3 — 2019-08-08
- 1.0.2 — 2019-08-08
- 1.0.1 — 2019-07-27
- 1.0.0 — 2019-07-26
- 0.14.0 — 2019-07-26
- 0.13.0 — 2019-07-25
- … 14 more at https://npm.io/package/omis/versions

## README

## Omis

1kb store system for React/Preact apps.

## Usage 

```jsx
import { $, render } from 'omis'

const Counter = $({
  render() {
    return <div>{$.store.data.count}</div>
  },
  use: ['count']
  //or
  //useSelf: ['count']
})

const App = $({
  render() {
    return (
      <div>
        <Counter />
      </div>
    )
  }
})

render(
  ReactDOM.render, //use Preact.render here when using preact
  <App />,
  '#root',
  {
    data: {
      count: 1
    }
  })
```

## Multi-store injection

```jsx
import React from 'react';
import ReactDOM from 'react-dom';

import { $, render } from './omis/omis'

const countStore = new class Store {
  data = {
    count: 1,
    msg: 'omis',
    num: Math.random()
  }
  sub = () => {
    this.data.count--
  }
  add = () => {
    this.data.count++
  }
  random = () => {
    this.data.num = Math.random()
  }
}

const nameStore = new class Store {
  data = {
    name: 'hello'
  }
  rename = () => {
    this.data.name = 'bcd'
  }
}

const Counter = $({
  render() {
    const $s = $.store.countStore
    const $ns = $.store.nameStore
    return <>
      <button onClick={$s.sub}>-</button>
      <span>{$s.data.count}</span>
      <button onClick={$s.add}>+</button>
      <div>{Math.random()}</div>
      <div onClick={$ns.rename}>{$ns.data.name}</div>
    </>
  },
  use: {
    countStore: ['count'],
    nameStore: ['name']
  }
})

const App = $({
  render() {
    const $s = $.store.countStore
    return <div>
      <div>{$s.data.msg}</div>
      <button onClick={$s.random}>Click me to updateSelf-{$s.data.num}</button>
      <div>{$s.data.count}</div>
      <Counter></Counter>
    </div>
  },
  useSelf: { countStore: ['num'] }
})

render(
  ReactDOM.render, //use Preact.render here when using preact
  <App />,
  '#root',
  {
    nameStore,
    countStore
  })
```

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