Framework7 React Package Structure

Package

Framework7 React package contains the following files and folders:

  1. framework7-react/
  2. components/
  3. accordion-content.js
  4. accordion-item.js
  5. accordion-toggle.js
  6. accordion.js
  7. actions-button.js
  8. actions-group.js
  9. actions-label.js
  10. actions.js
  11. app.js
  12. ...
  13. framework7-react.bundle.js
  14. framework7-react.bundle.min.js
  15. framework7-react.esm.js

Browser Script (UMD)

framework7-react.bundle.js is a so called UMD-format JavaScript intended to be used directly in browser (e.g. with <script src="...">) or with libraries like Require.js. It already contains all Framework7-React components registered.

It is not recommended to use this version for production, just for development and testing.

Components

All React components are located in components/ folder. These components are ES modules.

  1. import App from 'framework7-react/components/app.js';
  2. import Navbar from 'framework7-react/components/navbar.js';

Or they can be imported using named import from main file

  1. import { App, Navbar } from 'framework7-react';

ES Module

Framework7 React plugin can be imported as an ES-next module:

  1. // Import Framework7 Core
  2. import Framework7 from 'framework7/framework7-lite.js';
  3. /*
  4. Or import bundle with all components:
  5. import Framework7 from 'framework7/framework7-lite.esm.bundle.js';
  6. */
  7. // Import Framework7 React
  8. import Framework7React from 'framework7-react';
  9. // Init plugin
  10. Framework7.use(Framework7React)

By default it exports only Framework7-React plugin without any components. To import components separately, we need to use named import:

  1. import { App, Navbar } from 'framework7-react';

ES-Next

Note, that Framework7 and Framework7-React ES modules are in ES-next syntax, so don’t forget to enable/configure your Babel/Buble to transpile them as well, as well as template7, dom7 and ssr-window modules that used as dependencies.

← Installation

App Layout →