Wondering what’s next for npm?Check out our public roadmap! »

    react-uwp
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.3 • Public • Published

    img

    react-uwp

    cdnjs npm package Build Status

    PeerDependencies Dependencies DevDependencies

    React Components that Implement Microsoft's UWP Design & Fluent Design System.

    Online Documentation

    img Visit react-uwp.com online to review the API, see the components in action with live. Or build the documentation to locally.

    Installation

    React-UWP is available as an npm package.

    Use NPM to get React-UWP components and core styling. All you need is node.js and gulp.

    npm install --save react-uwp

    Usage

    React-UWP components require a theme to be provided. The quickest way to get up and running is by using the Theme to inject the theme into your application context.then, you can use any of the components as demonstrated in documentation.

    If you coding by Typescript, add ReactUWP namespace to tsconfig.json.

    {
      "compilerOptions": {
        "typeRoots": [
          "./node_modules/@types"
        ],
        "filesGlob": [
          "**/*.ts",
          "**/*.tsx"
        ],
        "files": [
          "node_modules/react-uwp/index.d.ts" // add to here.
        ]
      }
    }

    ./App.js

    import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { Theme as UWPThemeProvider, getTheme } from "react-uwp/Theme";
    import MyComponent from "./MyComponent";
     
    export class App extends React.Component {
      render() {
        return (
          <UWPThemeProvider
            theme={getTheme({
              themeName: "dark", // set custom theme
              accent: "#0078D7", // set accent color
              useFluentDesign: true, // sure you want use new fluent design.
              desktopBackgroundImage: "http://127.0.0.1:8092/staticimages/jennifer-bailey-10753.jpg" // set global desktop background image
            })}
          >
            <MyComponent />
          </UWPThemeProvider>
        )
      }
    }
     
    ReactDOM.render(
      <App />,
      document.getElementById("app")
    );

    ./MyComponent.js

    import * as React from "react";
    import Button from "react-uwp/Button";
     
    export default class MyComponent extends React.Component<voidvoid> {
      render() {
        return (
          <Button tooltip="Mini Tooltip" />
        )
      }
    }

    Notice: that in the above example, we used:

    import Button from "react-uwp/Button";

    instead of

    import { Button } from "react-uwp";

    This will make your build process faster and your build output smaller.

    For a complete mapping of React-UWP components to import, see /src/index.ts inside the React-UWP npm package root directory.

    Custom Theme

    We have implemented a default theme to render all React-UWP components. Styling components to your liking is simple and hassle-free. This can be achieved in the following two ways:

    Four Theme Style (Fluent Design & UWP Design)

    img

    Install

    npm i react-uwp

    DownloadsWeekly Downloads

    354

    Version

    1.3.3

    License

    MIT

    Unpacked Size

    1.43 MB

    Total Files

    376

    Last publish

    Collaborators

    • avatar