How to use react-uwp - 10 common examples

import * as MobileDetect from "mobile-detect";
const md = new MobileDetect(window.navigator.userAgent);

import Theme from "react-uwp/Theme";
import getTheme from "react-uwp/styles/getTheme";
import Wrapper from "../components/Wrapper";
import WrapperWithCategories from "../components/WrapperWithCategories";

export interface RouterCallback {
  (error: any, component?: any): void;
}

const useFluentDesign = true;
const desktopBackgroundImage = require("assets/images/blurBackground/jennifer-bailey-10753.jpg");
// const theme = getTheme({ useFluentDesign, desktopBackgroundImage, materialBackground: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16' xml:space='preserve'%3E%3Crect width='16' fill='none' height='16'/%3E%3Crect x='0' y='0' fill='hsla(0, 0%, 100%, 0.3)' width='1' height='1'/%3E%3C/svg%3E") repeat top right / 16px` });
const theme = getTheme({ useFluentDesign, desktopBackgroundImage });
const isMobile = Boolean(md.mobile());

const useBackdropCSS = {
  enableNoiseTexture: true,
  forceGenerateAcrylicTextures: false
};
const useCanvasAcrylic = {
  enableNoiseTexture: true,
  forceGenerateAcrylicTextures: true
};

export class ThemeWrapper extends React.Component {
  render() {
    const { children } = this.props;
    return (

markerHeight={arrowSize * 2}
              markerWidth={arrowSize}
              refY={arrowSize}
              refX="0"
            >

onChangeValue={value => {
                  theme.updateTheme(getTheme({
                    themeName: value.toLowerCase() as any,
                    accent: theme.accent,
                    useFluentDesign: theme.useFluentDesign,
                    desktopBackgroundImage: theme.desktopBackgroundImage
                  }));
                }}
              />

onClick: () => {
                theme.updateTheme(getTheme({
                  themeName: theme.isDarkTheme ? "light" : "dark",
                  accent: theme.accent,
                  useFluentDesign: theme.useFluentDesign,
                  desktopBackgroundImage: theme.desktopBackgroundImage
                }));
              }
            }]}

render() {
    const { userAgent } = this.props
    return (
      
        <button>Test Button</button>
        
        
        
        <p style="{{">{userAgent.slice(12)}...</p>
      
    )
  }
}

render() {
    const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, newTheme, ...attributes } = this.props;
    const darkTheme = getTheme({ themeName: "dark", accent: this.context.theme.accent });
    const { prefixStyle } = darkTheme;
    const lightTheme = getTheme({ themeName: "light", accent: this.context.theme.accent });
    const isColumn = direction === "column";
    const currThemeStyle: React.CSSProperties = prefixStyle({
      width: "50%",
      minHeight: 240,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      ...themeStyle
    });

    const { theme } = this.context;

    return useSingleTheme || theme.useFluentDesign ? (

onCheck={useFluentDesign => {
                theme.updateTheme(getTheme({
                  themeName: theme.themeName,
                  accent: theme.accent,
                  useFluentDesign,
                  desktopBackgroundImage: theme.desktopBackgroundImage
                }));
              }}
            />

render() {
    const { children, direction, themeStyle, useBorder, useChromeColor, useSingleTheme, newTheme, ...attributes } = this.props;
    const darkTheme = getTheme({ themeName: "dark", accent: this.context.theme.accent });
    const { prefixStyle } = darkTheme;
    const lightTheme = getTheme({ themeName: "light", accent: this.context.theme.accent });
    const isColumn = direction === "column";
    const currThemeStyle: React.CSSProperties = prefixStyle({
      width: "50%",
      minHeight: 240,
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      ...themeStyle
    });

    const { theme } = this.context;

    return useSingleTheme || theme.useFluentDesign ? (

<p>Dark Theme without Fluent Design</p>
          
          
          
        

        
          <p>Light Theme without Fluent Design</p>

render() {
        const baseStyle = React.CSSProperties = {
            margin: '10px 0'
        };

        const descStyle = {
            ...
            getTheme().typographyStyles.base,
            color: getTheme().baseMedium
        };

        return (
            <div>
                <h5 style="{getTheme().typographyStyles.subTitle}">API Key</h5>
                <p style="{descStyle}">
                    Your API key can be found in your preferences page on steamgriddb.com.
                </p>
                
            </div>
        )
    }
}