KonstaProvider

Contents

• Usage
• KonstaProvider Props

Usage

If you use Konsta UI with other frameworks (like Framework7 or Ionic), we still should specify Konsta UI's globals (like theme) with the help of KonstaProvider.

We also need to add k-ios or k-material class to the app's root element.

/* App.jsx */
import React from 'react';
// we use main App and Router components from Framework7
import { App, View, Page, Navbar } from 'framework7-react';
// we use KonstaProvider instead
import { KonstaProvider, Block, Button } from 'konsta/react';

export default function MyApp() {
  return (
    <>
      {/* Wrap our app with KonstaProvider */}
      <KonstaProvider theme="ios">
        {/* We add extra `k-ios` class to the app root element */}
        <App theme="ios" className="k-ios">
          <View>
            <Page>
              <Navbar title="My App" />
              {/*  Konsta UI components */}
              <Block>
                <p>Here comes my app</p>
              </Block>
              <Block className="space-y-4">
                <p>Here comes the button</p>
                <Button>Action</Button>
              </Block>
            </Page>
          </View>
        </App>
      </KonstaProvider>
    </>
  );
}

KonstaProvider Props