react-bind-properties-schema

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 Angular and the second in React:

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

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

and in React:

/** @jsx bindProps */
import bindProps from 'react-bind-properties-schema'

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

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

Installing

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-schema

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.