https://github.com/calebdwilliams/react-bind-props-schema
React JSX schema to enable property bindings to DOM nodes
https://github.com/calebdwilliams/react-bind-props-schema
Last synced: about 1 month ago
JSON representation
React JSX schema to enable property bindings to DOM nodes
- Host: GitHub
- URL: https://github.com/calebdwilliams/react-bind-props-schema
- Owner: calebdwilliams
- License: other
- Created: 2020-10-04T19:36:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-05T02:05:18.000Z (over 5 years ago)
- Last Synced: 2025-06-22T14:26:06.422Z (12 months ago)
- Language: JavaScript
- Size: 540 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-bind-properties-schema
[![npm package][npm-badge]][npm]
This module exports a React schema to add proprty bindings to DOM nodes in React applications. This is especially useful for working with custom elements, many of which may take complex data inputs.
This JSX pragma allows users to bind to the property on a DOM node using the `bindProps` React prop. This new prop takes an object where the each key is treated as a DOM node property and each value is bound to that value. As an example, the two code snippets peform the same task the first in React and the second in Angular:
### React example with this package
```jsx
/** @jsx bindProps */
import bindProps from 'react-bind-properties'
export function MyComponent () {
const list = ['one', 'two', 'three']
return
}
```
### Code equivalent in Angular
```typescript
import { Component } from '@angular/core';
@Component({
template: ''
})
export class MyComponent {
list = ['one', 'two', 'three'];
}
```
## Installation
The recommended installation method of this package is through [npm](http://npmjs.com). If you are unfamiliar with the npm ecosystem, there is some great [documentation available on the npm website](https://docs.npmjs.com/cli/install).
If you are familiar with npm, you can install this package using the command
```bash
npm i -D react-bind-properties
```
## Usage
### [See an example on StackBlitz](https://stackblitz.com/edit/bind-properties-demo?file=src/App.js)
Because the primary output of this package is a JSX pragma, you will first need to include the `/** @jsx */` syntax in your file.
Or add `pragma: "bindProps"` to your [`@babel/preset-react`](https://babeljs.io/docs/en/babel-preset-react) or [`@babel/plugin-transform-react-jsx`](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx) babel config.
[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