#thenativeweb-ux

thenativeweb-ux provides UI components for the native web applications.

#Quick start

First you need to install the module. thenativeweb-ux builds upon React and Next.js, so make sure to install them as well.

npm install thenativeweb-ux react react-dom next

#Create a theme

To style your application, you need to create a theme:

touch theme.ts

In most of the cases you can just use one of the built-in themes:

1
2
3
4
5
import { themes } from 'thenativeweb-ux';

const theme = new themes.TheNativeWeb();

export { theme };

#Create a document

To setup server side rendering of the critical styles for your application, create a custom _document.ts.

mkdir pages
touch pages/_document.ts

Import and extend the NextDocument component. Make sure to override its getInitialProps method. Use the static method NextDocument.getInitialPropsWithTheme to setup your theme:

1
2
3
4
5
6
7
8
9
10
11
import { NextDocument } from 'thenativeweb-ux';
import { theme } from '../theme';
import { DocumentContext, DocumentInitialProps } from 'next/document';

class CustomDocument extends NextDocument {
  public static async getInitialProps (originalContext: DocumentContext): Promise<DocumentInitialProps> {
    return NextDocument.getInitialPropsWithTheme(originalContext, theme);
  }
}

export default CustomDocument;

#Create an app

To remove server side styles once the application has been loaded on the client, create a custom _app.ts:

touch pages/_app.ts

Import and extend the NextApp component. Override its render method. Use the NextApp.renderWithTheme to setup your theme properly. You can render any HTML here that you might need for your application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { theme } from '../theme';
import { NextApp, Website } from 'thenativeweb-ux';
import React, { ReactElement } from 'react';

class CustomApp extends NextApp {
  public render (): ReactElement {
    const { Component, pageProps } = this.props;

    return NextApp.renderWithTheme((
      <Website>
        <Component { ...pageProps } />
      </Website>
    ), theme);
  }
}

export default CustomApp;

#Create your first page

Add an index page to your application:

touch pages/index.tsx

Besides setting up the page itself, you may also use a variety of components. To use a component, you need to add a reference to it. E.g., to use the Headline component, add the following line to your code:

1
2
3
4
5
6
7
8
9
import React, { ReactElement, Fragment } from 'react';
import { Paragraph, Headline } from 'thenativeweb-ux';

export default (): ReactElement => (
  <Fragment>
    <Headline>Your first page</Headline>
    <Paragraph>Now go ahead and add more components…</Paragraph>
  </Fragment>
);

#Runing your application

Finally, you can run your application using the next CLI:

npx next dev