@chakra-ui/react#UseToastOptions TypeScript Examples

The following examples show how to use @chakra-ui/react#UseToastOptions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: UI.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up 
private _handleMisc() {
    EventHandler.emitter().on(Events.SHOW_NOTIFICAION, (toast: UseToastOptions) => {
      this.toast(toast);
    });

    EventHandler.emitter().on(Events.CHAT_MESSAGE, (hustler: Hustler, text: string, timestamp?: number, addToChat?: boolean) => {      
      if (addToChat) {
        const messageData: DataTypes[NetworkEvents.SERVER_PLAYER_CHAT_MESSAGE] = {
          author: hustler.name,
          message: text,
          timestamp: timestamp ?? Date.now(),
        };
        // add to store
        this.messagesStore.push(messageData);
        // if chattype component is open, dispatch event to update it
        if (this.sendMessageInput) this.sendMessageInput.events.emit('chat_message', messageData);
      }

      // display message IG
      // TODO: dont display if hustler not in camera viewport?
      const messageDuration = {
        in: 500,
        hold: 3500 + text.length * 50,
        out: 500,
      };

      let chatToasts = this.chatMessageBoxes.get(hustler) ?? this.chatMessageBoxes.set(hustler, new Array()).get(hustler)!;

      chatToasts.push(
        this.rexUI.add.toast({
          background: this.rexUI.add.roundRectangle(0, 0, 2, 2, 10, 0xffffff, 0.4),
          text: getBBcodeText(this, 200, 0, 0, 10, '18px').setText(text),
          space: {
            left: 5,
            right: 5,
            top: 5,
            bottom: 5,
          },
          duration: messageDuration,
        }),
      );
      const chatMessage = chatToasts[chatToasts.length - 1];
      // show message
      chatMessage.showMessage(text);

      // destroy game object after duration & remove from array
      // timeout for duration of message
      setTimeout(
        () => {
          chatMessage.destroy();
          // remove chat message toast from array
          chatToasts.splice(chatToasts.indexOf(chatMessage), 1);
        },
        Object.values(messageDuration).reduce((a, b) => a + b, 0),
      );
    });
  }
Example #2
Source File: UI.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up 
chakraToastStyle: UseToastOptions = {
  isClosable: false,
  duration: 5000,
  status: 'info',
  position: 'bottom-right',
}
Example #3
Source File: Login.tsx    From dope-monorepo with GNU General Public License v3.0 5 votes vote down vote up 
toastStyle: UseToastOptions = {
    duration: 5000,
    position: "bottom-right",
    isClosable: true,
}
Example #4
Source File: toast.ts    From ledokku with MIT License 5 votes vote down vote up 
useToast = () => {
  const toastChakra = useToastChakra();

  const error = (description: string, options?: UseToastOptions) => {
    return toastChakra({
      description: description,
      status: 'error',
      position: 'top-left',
      duration: 5000,
      isClosable: true,
      ...options,
    });
  };

  const success = (description: string, options?: UseToastOptions) => {
    return toastChakra({
      description: description,
      status: 'success',
      position: 'top-left',
      duration: 5000,
      isClosable: true,
      ...options,
    });
  };

  const info = (description: string, options?: UseToastOptions) => {
    return toastChakra({
      description: description,
      status: 'info',
      position: 'top-left',
      duration: 5000,
      isClosable: true,
      ...options,
    });
  };

  const warning = (description: string, options?: UseToastOptions) => {
    return toastChakra({
      description: description,
      status: 'info',
      position: 'top-left',
      duration: 5000,
      isClosable: true,
      ...options,
    });
  };

  const toast = {
    success,
    error,
    info,
    warning,
  };

  return toast;
}