React Component Extensions

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

    1. import { Device, Request, Support } from 'framework7';

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

    All Framework7-React components use slots to distribute children across component structure. They work exactly the same as and Vue.js Slots.

    1. export default () => (
    2.   <Page>
    3.     <p slot="fixed">I'm fixed page element</p>
    4.     <p>I'm in scrollable page area</p>
    5.     <List>
    6.       <ListItem>
    7.         <img slot="media" src="path/to/image.png" />
    8.         <span slot="title">Title 1</span>
    9.         <span slot="title">Title 2</span>
    10.       </ListItem>
    11.     </List>
    12.   </Page>
    13. )

    Renders to:

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

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

    1.   render() {
    2.     return (
    3.       <Page onPageBeforeIn={this.onPageBeforeIn.bind(this)} onPageInit={this.onPageInit.bind(this)}>
    4.         ...
    5.       </Page>
    6.     )
    7.   }
    8.   onPageBeforeIn() {
    9.     // do something on page before in
    10.   }
    11.   onPageInit() {
    12.     // do something on page init

    Navigation / Router →