How to get $f7 (the App object) when app loaded?

I am using framework7-react.
I want to stroe $f7 object, and use it when I need use Notification component, so that I don’t need to pass the $f7 object every time I invoke the showNotification method that I write.

And I saw these codes in doc, but I do not know how to use it within f7-react.
app.on(‘panelOpen’, function (panel) {
console.log(‘Panel ’ + panel.side + ’ opened’);

In F7-React you can get it as this.$f7 in f7Ready:

import { App } from 'framework7-react';

exports class extends React.Component {
  render() {
    return <App>...</App>
  componentDidMount() {
    this.$f7ready((f7) => {
      // store "f7" instance wherever you need

In F7 React app instance is this.$f7:

this.$f7.on(‘panelOpen’, function (panel) {
console.log(‘Panel ’ + panel.side + ’ opened’);
1 Like