# binding-blocks

> React 2-way data binding to easily manage complex forms and data structures.

Latest version **0.0.25** (published 2020-05-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install binding-blocks
pnpm add binding-blocks
yarn add binding-blocks
bun add binding-blocks
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.25 |
| Published | 2020-05-19 |
| First published | 2020-04-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 110 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Michele Salvini |
| Maintainers | slv |
| Keywords | react, data-binding, forms |

## Links

- npm: https://www.npmjs.com/package/binding-blocks
- Repository: https://github.com/StayDistributed/binding-blocks
- Homepage: https://github.com/StayDistributed/binding-blocks#readme
- Issues: https://github.com/StayDistributed/binding-blocks/issues
- npm.io page: https://npm.io/package/binding-blocks

## 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.0.25 (latest) — 2020-05-19
- 0.0.24 — 2020-05-18
- 0.0.23 — 2020-05-04
- 0.0.22 — 2020-05-04
- 0.0.21 — 2020-05-01
- 0.0.20 — 2020-05-01
- 0.0.19 — 2020-05-01
- 0.0.17 — 2020-04-30
- 0.0.16 — 2020-04-22
- 0.0.15 — 2020-04-21
- 0.0.14 — 2020-04-20
- 0.0.13 — 2020-04-20
- 0.0.12 — 2020-04-20
- 0.0.11 — 2020-04-19
- 0.0.10 — 2020-04-19
- … 9 more at https://npm.io/package/binding-blocks/versions

## README

# Binding Blocks

React 2-way data binding to easily manage complex forms and data structures.

[![npm package][npm-badge]][npm]
[![Travis][build-badge]][build]
[![Coveralls][coveralls-badge]][coveralls]
[![CodeFactor][codefactor-badge]][codefactor]
[![BCH compliance][bch-badge]][bch]
[![Discord][discord-badge]][discord]

[npm-badge]: https://img.shields.io/npm/v/binding-blocks.svg
[npm]: https://www.npmjs.org/package/binding-blocks
[build-badge]: https://travis-ci.com/staydistributed/binding-blocks.svg?branch=master
[build]: https://travis-ci.com/staydistributed/binding-blocks
[coveralls-badge]: https://coveralls.io/repos/github/StayDistributed/binding-blocks/badge.svg?branch=master
[coveralls]: https://coveralls.io/github/StayDistributed/binding-blocks?branch=master
[codefactor-badge]: https://www.codefactor.io/repository/github/staydistributed/binding-blocks/badge
[codefactor]: https://www.codefactor.io/repository/github/staydistributed/binding-blocks
[bch-badge]: https://bettercodehub.com/edge/badge/StayDistributed/binding-blocks?branch=master
[bch]: https://bettercodehub.com/
[discord-badge]: https://img.shields.io/discord/699514717768515645
[discord]: https://discord.gg/q4vx7ej

---

## Install

```bash
$ npm i binding-blocks
```

## Usage

```jsx
import { Binding, Value } from 'binding-blocks';

const someData = {
  title: 'Hello',
  subtitle: 'World!'
};

const HelloWorld = () => {
  return (
    <Binding data={someData}>
      <h1><Value name="title" /></h1>
      <h3><Value name="subtitle" /></h3>
    </Binding>
  );
}
```

## Docs

**To start data binding with React, visit [https://staydistributed.github.io/binding-blocks/](https://staydistributed.github.io/binding-blocks/)**

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