https://github.com/yunho1017/react-custom-event

Define your own custom events in react !
https://github.com/yunho1017/react-custom-event

Last synced: 5 days ago
JSON representation

Define your own custom events in react !

• Host: GitHub
• URL: https://github.com/yunho1017/react-custom-event
• Owner: yunho1017
• Created: 2025-01-04T12:03:52.000Z (22 days ago)
• Default Branch: main
• Last Pushed: 2025-01-04T12:19:19.000Z (22 days ago)
• Last Synced: 2025-01-04T13:32:32.316Z (22 days ago)
• Size: 1.95 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-custom-event

Define your own custom events in react !

## Introduction

Let's implement a dialog using React.

The dialog has inputs. if values ​​are entered in the inputs, leave alert should be displayed when closing the dialog.

In this case, How would you implement this?

There are several ways to solve this. You can use ref or manage the values ​​on the side that declares the dialog.

How about this?

```js

const DialogCloseEvent = createCustomEvent("dialog-close");

const Dialog = (props) => {

  return  {

  try {

  DialogCloseEvent.call()

  props.onClose()

}

}>

{props.children}

}

const Component = () => {

  const [state, setState] = useState()

  useEffect(() => {

  const handler = () => {

if (state) {

throw new Error("leaveAlert!")

openLeaveAlert()

}

}

DialogCloseEvent.addEventListener(handler)

  return () => {

DialogCloseEvent.removeEventListener(handler)

}

},[])

  return 

}

```