React Component Extensions

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 will be available in all React components (Class components):

Components Properties

this.$f7ready	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: `export default class extends React.Component {` `…` `render() {` `…` `},` `componentDidMount() {` `this.$f7ready((f7) => {` `f7.dialog.alert(‘Component mounted’);` `});` `},` `…` `};`
this.$f7	Main Framework7’s initialized instance. It allows you to use any of Framework7 APIs
this.$$ this.Dom7	Access to built-in Dom7 DOM library that utilizes most edge and high-performance methods for DOM manipulation
this.$device	Access to Device utilities
this.$request	Access to Request library for XHR requests
this.$utils	Access to Utils object with few useful utilities
this.$theme	Object with boolean properties with information about currently used theme (iOS, MD or Aurora): `this.$theme.ios`, `this.$theme.material` and `this.$theme.aurora`
this.$f7router	This property 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. Framework7 Router Instance. It has a lot of useful Methods & Properties to use for navigation
this.$f7route	This property 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. Object with current route data that was used to load this page, tab or modal. It has 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 `context` - context that was passed to the route

If you use functional components, then previously described extensions will not work. Framework7 instance, f7ready method and theme can be imported directly from Framework7-React library. Device, Request and Support can be imported directly from Framework7 core library.

import { Device, Request, Support } from 'framework7';
import { f7, f7ready, theme } from 'framework7-react';

import { f7, f7ready } from 'framework7-react';
export default class extends React.Component {
  ...
  render() {
    ...
  },
  componentDidMount() {
    f7ready(() => {
      f7.dialog.alert('Component mounted');
    });
  },
  ...
};

Phenome.js

Framework7-React components are build with Phenome.js, so they are empowered with some extra features like Slots and Events.

Slots

All Framework7-React components use slots to distribute children across component structure. They work exactly the same as 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 class extends React.Component {
  render() {
    return (
      <Page onPageBeforeIn={this.onPageBeforeIn.bind(this)} onPageInit={this.onPageInit.bind(this)}>
        ...
      </Page>
    )
  }
  onPageBeforeIn() {
    // do something on page before in
  }
  onPageInit() {
    // do something on page init
  }
}

← Initialize App

Navigation / Router →