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:
1import { themes } from 'thenativeweb-ux';
2
3const theme = new themes.TheNativeWeb();
4
5export { 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:
1import { NextDocument } from 'thenativeweb-ux';
2import { theme } from '../theme';
3import { DocumentContext, DocumentInitialProps } from 'next/document';
4
5class CustomDocument extends NextDocument {
6 public static async getInitialProps (originalContext: DocumentContext): Promise<DocumentInitialProps> {
7 return NextDocument.getInitialPropsWithTheme(originalContext, theme);
8 }
9}
10
11export 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.
1import { theme } from '../theme';
2import { NextApp, Website } from 'thenativeweb-ux';
3import React, { ReactElement } from 'react';
4
5class CustomApp extends NextApp {
6 public render (): ReactElement {
7 const { Component, pageProps } = this.props;
8
9 return NextApp.renderWithTheme((
10 <Website>
11 <Component { ...pageProps } />
12 </Website>
13 ), theme);
14 }
15}
16
17export 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:
1import React, { ReactElement, Fragment } from 'react';
2import { Paragraph, Headline } from 'thenativeweb-ux';
3
4export default (): ReactElement => (
5 <Fragment>
6 <Headline>Your first page</Headline>
7 <Paragraph>Now go ahead and add more components…</Paragraph>
8 </Fragment>
9);
Runing your application
Finally, you can run your application using the next
CLI:
npx next dev