React Component Extensions

After React mounts the app and init Framework7, we will have access to Framework7's initialized instance and some other useful properties that can be imported from framework7-react package.

f7ready

It is a callback function that will be executed when Framework7 fully intialized. Useful to use in components when you need to access Framework7 API and to be sure it is ready. So it is safe to put all Framework7 related logic into this callback. As an argument it receives initialized Framework7 instance. For example:

import React, { useEffect } from 'react';
import { f7ready } from 'framework7-react';

export default () => {

  useEffect(() => {
    f7ready((f7) => {
      f7.dialog.alert('Component mounted');
    })
  }, []);

  // ...

}

f7

Main Framework7's initialized instance. It allows you to use any of Framework7 APIs.

If you are sure that on the moment when you access Framework7 instance, it was already initialized, you can import and use it directly:

import { f7 } from 'framework7-react';

export default () => {

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...

};

theme

It is an object with boolean properties with information about currently used theme (iOS or MD ): theme.ios, theme.md.

import { theme } from 'framework7-react';

export default () => {

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
}

f7route and f7router

Router instance and current route are passed via props to router components:

This properties only available for components loaded with router (e.g. pages, routable modals, routable tabs). If you need to access this property in "deeper" child components, then you need to pass it down using props.

// will be received in props
export default ({ f7route, f7router }) => {
  useEffect(() => {
    console.log(f7route.url)
  }, []);
  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
}

f7route is the current route, object with the following properties:

• url - route URL
• path - route path
• query - object with route query. If the url is /page/?id=5&foo=bar then it will contain the following object {id: '5', foo: 'bar'}
• params - route params. If we have matching route with /page/user/:userId/post/:postId/ path and url of the page is /page/user/55/post/12/ then it will be the following object {userId: '55', postId: '12'}
• name - route name
• hash - route URL hash
• route - object with matching route from available routes

Slots

All Framework7-React components use slots to distribute children across component structure. They work very similar to Web Component Slots and Vue.js Slots.

For example

export default () => (
  <Page>
    <p slot="fixed">I'm fixed page element</p>
    <p>I'm in scrollable page area</p>
    <List>
      <ListItem>
        <img slot="media" src="path/to/image.png" />
        <span slot="title">Title 1</span>
        <span slot="title">Title 2</span>
      </ListItem>
    </List>
  </Page>
)

Renders to:

<div class="page">
  <p slot="fixed">I'm fixed page element</p>
  <div class="page-content">
    <p>I'm in scrollable page area</p>
    <div class="list">
      <ul>
        <li>
          <div class="item-content">
            <div class="item-media">
              <img slot="media" src="path/to/image.png" />
            </div>
            <div class="item-inner">
              <div class="item-title">
                <span slot="title">Title 1</span>
                <span slot="title">Title 2</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

Events

All Framework7-React components support events, which are actually props, and their listeners must be assigned as on$Event prop.

For example <Page> component supports pageInit, pageBeforeIn and other events, so to handle such events:

export default () => {
  const onPageBeforeIn = () => {
    // do something on page before in
  }

  const onPageInit = () => {
    // do something on page init
  }

  return (
    <Page onPageBeforeIn={onPageBeforeIn} onPageInit={onPageInit}>
      ...
    </Page>
  )
}