Usage

• Components
• App Component
• Konsta UI Provider

After installation process is done we can start using Konsta UI components in our React application.

Components

The process is pretty straightforward and we need to import Konsta UI React components from konsta/react:

/* App.jsx */
import React from 'react';
import { Block, Button } from 'konsta/react';

export function MyApp() {
  // ...

  return (
    <>
      <Block>
        <p>This is block with text</p>
      </Block>
      <Block className="space-y-4">
        <p>Here comes the button</p>
        <Button>Action</Button>
      </Block>
    </>
  );
}

App Component

We suppose you use Konsta UI components with some other framework (like Framework7 or Ionic).

But if you use only Konsta UI then we need to wrap all our components with Konsta UI's App component.

In App component we can define global theme (iOS or Material) and other useful globals:

/* App.jsx */
import React from 'react';
import { App, Page, Navbar, Block } from 'konsta/react';

export default function MyApp() {
  return (
    <App theme="ios">
      <Page>
        <Navbar title="My App" />
        <Block>
          <p>Here comes my app</p>
        </Block>
      </Page>
    </App>
  );
}

Konsta UI Provider

And if you do use Konsta UI with other frameworks, we still can (and should) specify Konsta UI's globals (like theme). For this case we need to use 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>
    </>
  );
}