# Ringing call

[`RingingCall`](https://github.com/GetStream/stream-video-js/tree/main/packages/react-sdk/src/components/RingingCall) displays incoming or outgoing [ring calls](https://getstream.io/video/docs/react/v2/advanced/ringing-calls/) with member avatars, connection status, and accept/cancel buttons.

## Best Practices

- Show `RingingCall` when `callingState` is `CallingState.RINGING`.
- Use `call.isCreatedByMe` to distinguish incoming vs outgoing calls.
- Provide callbacks for post-accept/reject navigation.

![Default incoming call panel](https://getstream.io/docs-assets/images/fdb36b179dd7.png)

![Default outgoing call panel](https://getstream.io/docs-assets/images/1f3274dd30b4.png)

## General usage

```tsx
import { Call, RingingCall, StreamCall } from "@stream-io/video-react-sdk";

const MyRingingCallUI = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <RingingCall />
    </StreamCall>
  );
};
```

## Ringing call controls

The `RingingCall` component features [`CancelCallButton`](https://getstream.io/video/docs/react/v2/ui-components/call/call-controls#cancelcallbutton) to reject/cancel the outgoing/incoming call and in case of incoming call panel, also [`AcceptCallButton`](https://getstream.io/video/docs/react/v2/ui-components/call/call-controls#acceptcallbutton) is displayed.

## Props RingingCall

### `includeSelf`

| Type                     | Default |
| ------------------------ | ------- |
| `boolean` \| `undefined` | `false` |

Whether to include the current user in the list of members to show.

### `totalMembersToShow`

| Type                    | Default |
| ----------------------- | ------- |
| `number` \| `undefined` | `3`     |

The maximum number of members to show.

## Props RingingCallControls

None

## Customization

If you want to create your own ringing call panel, see our [ringing call panel customization guide](https://getstream.io/video/docs/react/v2/ui-cookbook/ringing-call/).

---

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/v2/ui-components/call/ringing-call/](https://getstream.io/video/docs/react/v2/ui-components/call/ringing-call/).