Framework7 React

Framework7 572,986 React 7,897 (framework7-react, MIT, 9.1.3) wraps every component as a React component and requires React 19. The CLI's React template (Framework and Template) sets everything up. By hand, a Vite 25,978 project needs npm 2,036 install framework7 framework7-react react react-dom and @vitejs/plugin-react; the demo below (React 19.3.0, Vite 8.3.0) copies BookNest's store.js and books.json.

main.jsx imports Framework7 from framework7/lite-bundle (every component, minus the .f7 component system that React replaces), calls Framework7.use(Framework7React) and renders <App />, which passes the constructor options as props: <App {...f7params}><View main url="/" /></App>, with f7params holding name, theme, colors, store and a routes array whose component values are React components. A page is ordinary JSX:

import { Page, Navbar, List, ListItem, useStore } from 'framework7-react';
export default function CatalogPage() {
  const books = useStore('books'); // re-renders when the getter changes
  const count = useStore('cartCount');
  return (
    <Page>
      <Navbar title="BookNest" subtitle={`React · ${count} in cart`} />
      <List strong inset dividersIos>
        {books.map((b) => (
          <ListItem key={b.id} link={`/books/${b.id}/`} title={b.title} footer={b.author}
            after={`$${b.price.toFixed(2)}`} />
        ))}
      </List>
    </Page>
  );
}

useStore() reads a getter of the Framework7 Store into React state and, unlike $store in a router component (Connecting the Store), removes its subscription when the component unmounts. Router pages receive f7route and f7router as props, and the f7 export is the app instance once f7ready() has fired.