Positioning the floating notification inbox

The notification inbox position is powered by the popper library. Therefore, you can use popper's offset modifier to displace the notification inbox from the bell by setting the popperOptions property on the FloatingNotificationInbox component.

The offset option accepts an array with two numbers in the form: [distance along the bell, distance away from the bell]. This is a full example:

import React from 'react';
import MagicBell, { FloatingNotificationInbox } from '@magicbell/magicbell-react';

export default function Notifications() {
  const distanceAlongRef = 16;
  const distanceAwayFromRef = 32;

  return (
    <MagicBell apiKey="MAGICBELL_API_KEY" userExternalId="u001">
      {(props) => (
        <FloatingNotificationInbox
          height={500}
          placement="bottom-end"
          popperOptions={{
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [distanceAlongRef, distanceAwayFromRef],
                },
              },
            ],
          }}
          {...props}
        />
      )}
    </MagicBell>
  );
}