{"id":15388081,"url":"https://github.com/calebdwilliams/react-bind-props-schema","last_synced_at":"2026-05-08T04:18:57.720Z","repository":{"id":57332925,"uuid":"301211616","full_name":"calebdwilliams/react-bind-props-schema","owner":"calebdwilliams","description":"React JSX schema to enable property bindings to DOM nodes","archived":false,"fork":false,"pushed_at":"2020-10-05T02:05:18.000Z","size":553,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-22T14:26:06.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/calebdwilliams.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-04T19:36:15.000Z","updated_at":"2020-10-05T02:05:20.000Z","dependencies_parsed_at":"2022-08-24T18:51:42.268Z","dependency_job_id":null,"html_url":"https://github.com/calebdwilliams/react-bind-props-schema","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/calebdwilliams/react-bind-props-schema","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Freact-bind-props-schema","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Freact-bind-props-schema/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Freact-bind-props-schema/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Freact-bind-props-schema/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebdwilliams","download_url":"https://codeload.github.com/calebdwilliams/react-bind-props-schema/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Freact-bind-props-schema/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262951530,"owners_count":23389877,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-01T14:55:25.994Z","updated_at":"2026-05-08T04:18:52.688Z","avatar_url":"https://github.com/calebdwilliams.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-bind-properties-schema\n\n\u003c!-- [![Travis][build-badge]][build] --\u003e\n[![npm package][npm-badge]][npm]\n\u003c!-- [![Coveralls][coveralls-badge]][coveralls] --\u003e\n\nThis 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.\n\nThis 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:\n\n### React example with this package\n\n```jsx\n/** @jsx bindProps */\nimport bindProps from 'react-bind-properties'\n\nexport function MyComponent () {\n    const list = ['one', 'two', 'three']\n\n    return \u003ccustom-element bindProps={{ list }}\u003e\u003c/custom-element\u003e\n}\n```\n\n### Code equivalent in Angular\n\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n    template: '\u003ccustom-element [list]=\"list\"\u003e\u003c/custom-element\u003e'\n})\nexport class MyComponent {\n    list = ['one', 'two', 'three'];\n}\n```\n\n## Installation\n\nThe 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).\n\nIf you are familiar with npm, you can install this package using the command\n\n```bash\nnpm i -D react-bind-properties\n```\n\n## Usage\n\n### [See an example on StackBlitz](https://stackblitz.com/edit/bind-properties-demo?file=src/App.js)\n\nBecause the primary output of this package is a JSX pragma, you will first need to include the `/** @jsx \u003cPRAGMA_NAME\u003e */` syntax in your file.\n\nOr 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.\n\n[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square\n[build]: https://travis-ci.org/user/repo\n\n[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square\n[npm]: https://www.npmjs.org/package/npm-package\n\n[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square\n[coveralls]: https://coveralls.io/github/user/repo\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebdwilliams%2Freact-bind-props-schema","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebdwilliams%2Freact-bind-props-schema","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebdwilliams%2Freact-bind-props-schema/lists"}