# useDocumentEvent

https://www.sanity.io/learn/course/build-content-apps-with-sanity-app-sdk/use-document-event.md

Listen to changes to content in your application and trigger events in the user interface.

User feedback is extremely important in our applications. Especially when users are taking actions as significant as publishing or deleting documents. 

Sanity UI comes with hooks to pop up toast notifications. We'll configure that when events happen in this lesson.

Sanity UI exports a `ToastProvider` which should already be included inside the SanityUI component.

1. **Confirm** `SanityUI.tsx` includes the `ToastProvider`

```tsx:app-feedback/src/SanityUI.tsx
import {ThemeProvider, ToastProvider} from '@sanity/ui'
import {buildTheme} from '@sanity/ui/theme'
import {createGlobalStyle} from 'styled-components'

const theme = buildTheme()

const GlobalStyle = createGlobalStyle`
  html, body {
    margin: 0;
    padding: 0;
  }
`

export function SanityUI({children}: {children: React.ReactNode}) {
  return (
    <>
      <GlobalStyle />
      <ThemeProvider theme={theme}>
        <ToastProvider>{children}</ToastProvider>
      </ThemeProvider>
    </>
  )
}
```

Now you can create a new component to listen to document events as they happen, and when required, pop up toast notifications in the UI.

1. **Create** a new `FeedbackEvents` component to fire toast notifications as events happen

```tsx:app-feedback/src/FeedbackEvents.tsx
  import { DocumentEvent, useDocumentEvent } from "@sanity/sdk-react"
  import { useToast } from "@sanity/ui"
  
  export function FeedbackEvents() {
    const toast = useToast()
    const onEvent = (documentEvent: DocumentEvent) => {
      if (documentEvent.type === "published") {
        toast.push({
          title: "Feedback processed",
          status: "success",
        })
      } else if (documentEvent.type === "deleted") {
        toast.push({
          title: "Feedback deleted",
          status: "error",
        })
      }
    }
  
    useDocumentEvent({ onEvent })
  
    return null
  }
```

This component doesn't render any UI and so can be rendered anywhere inside the `SanityApp` provider.

1. **Update** `App.tsx` to include the `FeedbackEvents` component

```tsx:app-feedback/src/App.tsx
import { FeedbackEvents } from "./FeedbackEvents"

export function App() {
  // ...sanityConfigs, Loading

  return (
    <SanityUI>
      <SanityApp config={sanityConfigs} fallback={<Loading />}>
        <Feedback />
        <FeedbackEvents />
      </SanityApp>
    </SanityUI>
  )
}

export default App
```

Now you can click **Approve**, **Mark as Spam** or **Delete** on any document and see a toast notification to show you've completed an action.

![Missing alt text](https://cdn.sanity.io/images/3do82whm/next/6e39291af02cdcdd47592a7a5688ae8e63795284-2240x1480.png)

At this point, you could consider our app to be "feature complete." Authors are able to set the sentiment of a piece of feedback, add some notes and take a final action on the document.

But we can go deeper!