Skip to content

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

License

Notifications You must be signed in to change notification settings

vitalyq/react-trigger-change

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

69 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-trigger-change Build Status Npm Version

Build Status

Library for triggering 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:

<script src="https://unpkg.com/react-trigger-change/dist/react-trigger-change.js"></script>

Use

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:

let node;
ReactDOM.render(
  <input
    onChange={() => 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/[email protected]/umd/react.development.js&dom=https://unpkg.com/[email protected]/umd/react-dom.development.js

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published