How to use Growl component in typescript

UI Components for React
Post Reply
bharat.sharma
Posts: 1
Joined: 23 May 2019, 00:26

23 May 2019, 00:31

Hi,

Please suggest how to use the Growl component in typescript project.

Below is my code from App.tsx.

import { Growl } from 'primereact/growl';

type IProps = {};

type IState = {
currentUser: {
email: string;
};
};

class App extends React.Component<IProps, IState> {
private growl: Growl;
constructor(props: IProps) {
super(props);

this.state = {
currentUser: {
email: 'user@xxx.com'
}
};

this.growl = React.createRef<Growl>();
}

public componentDidMount() {
this.growl.show({
severity: 'success',
summary: 'Success Message',
detail: 'Order submitted'
});
}

public render() {
return (
<div>
<Growl ref={el => (this.growl = el)} />
</div>

);
}
}

export default App;

BuckAMayzing
Posts: 5
Joined: 21 May 2019, 18:33

23 May 2019, 15:37

So, for future reference, do you mind using code tags? It makes things a lot easier to read.

It looks like the issue here is that you're using React.createRef. React.createRef is for creating a reference to a DOM element or a React component. You typically only use this for interacting with third-party, DOM based libraries or for managing the DOM directly (video output, maybe?). You should be using the below instead:

Code: Select all

class App extends React.Component<IProps, IState> {
  private growl: Growl;
  constructor(props: IProps) {
  super(props);

  this.state = {
    currentUser: {
    email: 'user@xxx.com'
    }
  };

  this.growl = new Growl({}); // <---- Note the change in this line.
}
EDIT: originally forgot the empty props in the Growl constructor.

raymanoz
Posts: 1
Joined: 29 Sep 2019, 10:51

29 Sep 2019, 11:05

I'm also trying to figure out how to use the Growl component in typescript.

I've tried to do the same, but

Code: Select all

show
method doesn't exist?!

Is there a references/example anywhere? The javascript example just doesn't translate to typescript.

User avatar
Melloware
Posts: 1297
Joined: 22 Apr 2013, 15:48

11 Oct 2019, 14:27

Example is right here how to use Growl and control it: https://github.com/primefaces/primereac ... owlDemo.js
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 7.0.6 / PF Extensions 7.0.2

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 0 guests