react-bind-properties

react-bind-properties-schema

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 bindProps */
import bindProps from 'react-bind-properties'

export function MyComponent () {
    const list = ['one', 'two', 'three']

    return <custom-element bindProps={{ list }}></custom-element>
}

Code equivalent in Angular

import { Component } from '@angular/core';

@Component({
    template: '<custom-element [list]="list"></custom-element>'
})
export class MyComponent {
    list = ['one', 'two', 'three'];
}

Installation

The recommended installation method of this package is through npm. If you are unfamiliar with the npm ecosystem, there is some great documentation available on the npm website.

If you are familiar with npm, you can install this package using the command

npm i -D react-bind-properties

Usage

See an example on StackBlitz

Because the primary output of this package is a JSX pragma, you will first need to include the /** @jsx <PRAGMA_NAME> */ syntax in your file.

Or add pragma: "bindProps" to your @babel/preset-react or @babel/plugin-transform-react-jsx babel config.