https://github.com/vitalyq/react-trigger-change

Trigger React's synthetic change events on input, textarea and select elements
https://github.com/vitalyq/react-trigger-change

change dispatch event react trigger

Last synced: 15 days ago
JSON representation

Trigger React's synthetic change events on input, textarea and select elements

• Host: GitHub
• URL: https://github.com/vitalyq/react-trigger-change
• Owner: vitalyq
• License: mit
• Created: 2017-04-06T10:43:32.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-05-17T17:12:38.000Z (over 6 years ago)
• Last Synced: 2025-10-12T06:12:29.763Z (4 months ago)
• Topics: change, dispatch, event, react, trigger
• Language: JavaScript
• Size: 63.5 KB
• Stars: 80
• Watchers: 2
• Forks: 12
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-trigger-change [![Build Status](https://img.shields.io/travis/vitalyq/react-trigger-change.svg)](https://travis-ci.org/vitalyq/react-trigger-change) [![Npm Version](https://img.shields.io/npm/v/react-trigger-change.svg)](https://www.npmjs.com/package/react-trigger-change)

[![Build Status](https://saucelabs.com/browser-matrix/vitalyq.svg)](https://saucelabs.com/u/vitalyq)

Library for triggering [React](https://github.com/facebook/react/)'s synthetic change events on input, textarea and select elements.

In production builds of React `ReactTestUtils.Simulate` doesn't work because of dead code elimination. There is no other built-in way to dispatch synthetic change events.

This module is a hack and is tightly coupled with React's implementation details. Not intended for production use. Useful for end-to-end testing and debugging.

## Install

With npm:

```

npm install react-trigger-change --save-dev

```

From a CDN:

```HTML

```

## Use

```JSX

reactTriggerChange(DOMElement);

```

*DOMElement* - native DOM element, will be the target of change event.

One way to obtain a DOM element in React is to use `ref` attribute:

```JSX

let node;

ReactDOM.render(

   console.log('changed')}

    ref={(input) => { node = input; }}

  />,

  mountNode

);

reactTriggerChange(node); // 'changed' is logged

```

## Test

Build the browser bundle:

```

npm install

npm run build

```

Open `test/test.html` in the browser.

To test with a different version of React, specify React and ReactDOM URLs in a query string:

```

?react=https://unpkg.com/react@16.2.0/umd/react.development.js&dom=https://unpkg.com/react-dom@16.2.0/umd/react-dom.development.js

```