CODEWITHSUNDEEP
reactjstypescriptblueprintjs
Shahzeb Khan
Shahzeb Khan

Reputation: 447

How do you use a <Toast> in blueprintjs?

As someone who isn't using typescript, I'm having a really hard time figuring out how to use Toast. I can tell this component seems to look different than the others.

Here is the example code, what would be the ES6 equivalent?

import { Button, Position, Toaster } from "@blueprintjs/core";

class MyComponent extends React.Component<{}, {}> {
 private toaster: Toaster;
 private refHandlers = {
    toaster: (ref: Toaster) => this.toaster = ref,
 };

   public render() {
    return (
        <div>
            <Button onClick={this.addToast} text="Procure toast" />
            <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
        </div>
    )
  }

  private addToast = () => {
    this.toaster.show({ message: "Toasted!" });
 }
}

Upvotes: 0

Views: 2339

Answers (1)

bennygenel
bennygenel

Reputation: 24660

TypeScript just adds type checks to the code. You can learn more about it from this question.

The change is pretty simple. You just need to remove type declarations.

import { Button, Position, Toaster } from "@blueprintjs/core";

class MyComponent extends React.Component {
   refHandlers = {
     toaster: (ref) => this.toaster = ref,
   };

   render() {
     return (
       <div>
         <Button onClick={this.addToast} text="Procure toast" />
         <Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster} />
       </div>
     )
  }

  addToast = () => {
    this.toaster.show({ message: "Toasted!" });
  }
}

Upvotes: 4

Related Questions