Is it react synthetic event?
npm install is-react-synthetic-event> Is it react synthetic event?
- Installation
- Usage
- Disclaimer
- Examples
- Contribution
- License
``shell`
$ npm i is-react-synthetic-event
Alternatively, using yarn:
`shell`
$ yarn add is-react-synthetic-event
Then with a module bundler, you can use like this:
`js
// ES6 modules
import isReactSyntheticEvent from 'is-react-synthetic-event';
// CommonJS modules
const isReactSyntheticEvent = require('is-react-synthetic-event');
`
`js`
function isReactSyntheticEvent(event: any): boolean
Because implementation uses some properties related to only internal purpose in React, this package implementation is a bit dangerous. Therefore, it can not be used if the underlying implementation changes.
The implementation is tested by each specific version starting from v0.14, and the implementation can be seen here.
- Is there a reason you did not compare strings like below?
`js`
function isReactSyntheticEvent(event) {
let proto = Object.getPrototypeOf(event);
while (proto) {
if (proto.constructor.name === 'SyntheticEvent') {
return true;
}
proto = Object.getPrototypeOf(proto);
}
return false;
}
If you have a build process, because the name of the constructor ('SyntheticEvent') changes in minified react codes, you will not be able to use it in a production environment. (process.env.NODE_ENV === 'production')
- in React component
`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import isReactSyntheticEvent from 'is-react-synthetic-event';
class Button extends React.Component {
handleClick(event) {
console.log(isReactSyntheticEvent(event)); // Obviously true
}
render() {
return ;
}
}
ReactDOM.render(, document.body);
`
- in Redux custom action creator helper (variation of redux-actions's createAction)
`js
import isReactSyntheticEvent from 'is-react-synthetic-event';
function createAction(type, payloadCreator = (v) => v) {
if (typeof type !== 'string') throw new Error('type must be string');
if (typeof payloadCreator !== 'function') throw new Error('payload creator must be function');
return function actionCreator(...args) {
const payload = payloadCreator(...args);
const action = { type };
if (payload instanceof Error) action.error = true;
if (payload !== undefined || !isReactSyntheticEvent(payload)) action.payload = payload;
return action;
};
}
`
Then, you will not see unnecessary methods and the following warning messages.
!react synthetic event warning message
The difference of before and after using the variation of redux-actions createAction:
`diff
import React from 'react';
import { connect } from 'react-redux';
// Same as createAction in examples.
import createAction from '../store/createAction';
class Example extends React.Component {
- constructor(props) {
- super(props);
- this.handleClick = this.handleClick.bind(this);
- }
- handleClick() {
- this.props.createConnection();
- }
/**
* ... Some other codes
*/
render() {
- return ;
+ return ;
}
}
const createConnection = createAction('CONNECTION_CREATE');
const mapDispatchToProps = { createConnection };
export default connect(undefined, mapDispatchToProps);
`
1. Fork to your repository.
2. git clone https://github.com/
3.
4.
5.
6.
7. Make some change to codes using with
8. Commit those changes.
9. Push to your origin repository and Submit a pull request to this repository.
MIT © Taehwan Noh