{"id":14981994,"url":"https://github.com/calebdwilliams/jsx-native-events","last_synced_at":"2025-10-29T09:31:34.575Z","repository":{"id":34932799,"uuid":"192110173","full_name":"calebdwilliams/jsx-native-events","owner":"calebdwilliams","description":"A JSX schema for adding support for native events (including CustomEvent)","archived":false,"fork":false,"pushed_at":"2022-02-12T02:08:41.000Z","size":1907,"stargazers_count":37,"open_issues_count":9,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T10:01:07.327Z","etag":null,"topics":["jsx","jsx-pragma","native-events","native-jsx-events","react","web-components"],"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":"2019-06-15T18:14:42.000Z","updated_at":"2024-04-05T16:24:05.000Z","dependencies_parsed_at":"2022-08-08T03:00:44.828Z","dependency_job_id":null,"html_url":"https://github.com/calebdwilliams/jsx-native-events","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fjsx-native-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fjsx-native-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fjsx-native-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/calebdwilliams%2Fjsx-native-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/calebdwilliams","download_url":"https://codeload.github.com/calebdwilliams/jsx-native-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238400419,"owners_count":19465641,"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":["jsx","jsx-pragma","native-events","native-jsx-events","react","web-components"],"created_at":"2024-09-24T14:04:37.575Z","updated_at":"2025-10-29T09:31:34.120Z","avatar_url":"https://github.com/calebdwilliams.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jsx-native-events\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\nThis module adds a custom JSX pragma enabling native DOM events to be handled declaratively in JSX. In traditional JSX, events need to be handled by passing down props to elements such as `onClick` or `onChange` that will be attached to the compiled DOM element at some point during the application's lifecycle. For standard events, this works great; however, for events that aren't as common or for [constructed events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) or instances of [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent), the prop API falls short.\n\nThis JSX pragma allows users to declaratively attach event listeners to elements using the `onEvent\u003cEventName\u003e` syntax where `\u003cEventName\u003e` would be replaced by a [camelCase](https://en.wikipedia.org/wiki/Camel_case) version of the event's name. So, a `'click'` event would use the prop `onEventClick` or a custom event with a name of `accordion-toggle` would use the `onEventAccordionToggle` prop.\n\n## Why onEvent?\n\nThe use of `onEvent\u003cEventName\u003e`, though a bit verbose, was intentional to minimize conflicts with existing code in the React ecosystem while still keeping the syntax familiar. Using `on\u003cEventName\u003e` would require double checking for the native JSX events. Likewise, using syntax such as `on-accordion-toggle` would feel foreign to existing JSX codebases. The `onEvent` prefix seemed like the best option in the short term.\n\n## Installing\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`npm i -D jsx-native-events`\n\n## Usage\n\n### [See this example on StackBlitz](https://stackblitz.com/edit/jsx-native-events-demo)\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: \"nativeEvents\"` 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```jsx\n/** @jsx nativeEvents */\nimport React, { useState } from 'react'\nimport nativeEvents from 'jsx-native-events'\n\nexport default function SomeComponent (props) {\n    const [ name, setName ] = useState('')\n    \n    return \u003cdiv\u003e\n        \u003cp\u003eMy name is {name}\u003c/p\u003e\n\n        \u003cweb-component onEventCustomEvent={ e =\u003e setName(e.detail) }\u003e\u003c/web-component\u003e\n    \u003c/div\u003e\n}\n```\n\nIn the above example, `\u003cweb-component\u003e` is an example of a [custom element](https://css-tricks.com/an-introduction-to-web-components/) that dispatches an event called `custom-event`. In our React application, we want to listen for that custom event and set the name every time the event is emitted.\n\nUsing the `/** @jsx nativeEvents */` pragma at the top of the file lets JSX know that we want to use the function imported in line 3 (`import nativeEvents from 'jsx-native-events'`) as an addition to React's built-in JSX engine.\n\nThe new props will only work for implementations of [`EventTarget`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget), so the new props are not ignored on React components, but should work on all DOM elements represented by React's JSX.\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%2Fjsx-native-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcalebdwilliams%2Fjsx-native-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcalebdwilliams%2Fjsx-native-events/lists"}