Package Exports

react-windows-ui
react-windows-ui/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-windows-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-windows-ui

Build full featured Windows fluent UI apps using ReactJS.

Demo ⚡

https://virtualvivek.github.io/react-windows-ui/

Getting Started

It will setup everything and then don't require manual method.

npx create-react-app MyAppName --template windows-ui

Manual Setup

If you don't want to go with the above create-react-app then use the below manual method.

npm install react-windows-ui

// Be sure to include styles at some point, probably during your bootstraping
import "react-windows-ui/config/app-config.css";
import "react-windows-ui/dist/react-windows-ui.min.css";
import "react-windows-ui/icons/fonts/fonts.min.css";

Configuration

app-config.css file contains the PrimaryColor, Fontfamily used by the app.
You can either import it from app-config.css.
OR
Create your own like this

app-config.css

:root {
  --PrimaryColor: #0078D7; /* Change of your choice */
  --PrimaryColorLight: #47aeff;  /* Lighter version of --PrimaryColor for DarkMode */
}
body {
  font-family: "Segoe UI";
}
::selection {
  color: #ffffff;
  background-color: var(--PrimaryColor);
}

Usage

import { Button, InputText } from 'react-windows-ui';

const App = () => (
  <>
    <Button type="primary" value="Press Me" />
    <InputText placeholder="Enter a text" />
  </>
);

Boilerplate

Run Demo Locally

$ git clone https://github.com/virtualvivek/react-windows-ui.git
$ cd react-windows-ui
$ npm install
$ npm start

RTL Support

Distribute layout direction from Right to Left.

// include rtl styles at some point, probably during your bootstraping

import 'react-windows-ui/dist/react-windows-ui-rtl.min.css'

Links

Here are some useful links.

Find this library useful? ❤️

Support it by joining stargazers for this repository. ⭐

License

react-windows-ui is licensed under MIT license. View license.
Copyright (c) 2021 Vivek Verma