@magicbell/magicbell-react
Version:
React components for building a notification inbox for your app
59 lines • 3.38 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = MagicBell;
const tslib_1 = require("tslib");
const react_headless_1 = require("@magicbell/react-headless");
const react_1 = tslib_1.__importStar(require("react"));
const index_js_1 = tslib_1.__importDefault(require("../Bell/index.js"));
const index_js_2 = tslib_1.__importDefault(require("../FloatingNotificationInbox/index.js"));
const MagicBellChildrenWrapper_js_1 = tslib_1.__importDefault(require("../MagicBellProvider/MagicBellChildrenWrapper.js"));
const defaultInbox = (props) => react_1.default.createElement(index_js_2.default, { height: 500, ...props });
/**
* Magicbell root component. Use this one in your application.
*
* @param props.apiKey API key of the MagicBell project
* @param props.userEmail Email of the user whose notifications will be displayed
* @param props.userExternalId External ID of the user whose notifications will be displayed
* @param props.userKey Computed HMAC of the user whose notifications will be displayed, compute this with the secret of the magicbell project
* @param props.theme Object to customize the theme
* @param props.BellIcon Icon for the bell
* @param props.Badge A custom badge component to show the number of unread or unseen notifications
* @param props.defaultIsOpen Show the children when the component is rendered. It is false by default.
* @param props.stores Configuration of stores to be created
* @param props.locale Locale to use in the components
* @param props.onNewNotification Function called when a notification is created.
* @param props.onToggle Function called when the bell is clicked.
* @param props.isOpen Whether the notification inbox is open or not, use to control state.
* @param props.bellCounter Counter to show in the bell. If set to 'unread' it will show the number of unread notifications.
*
* @example
* <MagicBell
* apiKey={MAGICBELL_API_KEY}
* userEmail={email}
* BellIcon={<MyIcon />}
* >
* {(props) => <NotificationInbox {...props} />}
* </MagicBell>
*/
function MagicBell({ children = defaultInbox, BellIcon, Badge, defaultIsOpen = false, onNewNotification, onToggle, bellCounter = 'unseen', isOpen: externalIsOpen, ...settings }) {
const launcherRef = (0, react_1.useRef)(null);
const isControlled = typeof externalIsOpen !== 'undefined';
const [internalIsOpen, setInternalIsOpen] = (0, react_1.useState)(defaultIsOpen);
const isOpen = isControlled ? externalIsOpen : internalIsOpen;
const handleToggle = () => {
if (!isControlled) {
setInternalIsOpen((c) => !c);
}
onToggle?.(!isOpen);
};
const handleNewNotification = (notification) => {
onNewNotification?.(notification);
};
(0, react_headless_1.useMagicBellEvent)('notifications.new', handleNewNotification);
return (react_1.default.createElement(MagicBellChildrenWrapper_js_1.default, { ...settings },
react_1.default.createElement("div", null,
react_1.default.createElement("div", { ref: launcherRef, "aria-expanded": isOpen },
react_1.default.createElement(index_js_1.default, { onClick: handleToggle, Icon: BellIcon, Badge: Badge, counter: bellCounter })),
isOpen && children({ isOpen, toggle: handleToggle, launcherRef }))));
}
//# sourceMappingURL=MagicBell.js.map