myxvisual
react-uwp
React Components that Implement Microsoft's UWP Design & Fluent Design System.
Online Documentation
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-uwpUsage
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
ReactUWPnamespace totsconfig.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<void, void> {
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:
- With the theme, you can use a custom theme to style components.
- With the inline style, you can override individual
component styles via the style property.
Four Theme Style (Fluent Design & UWP Design)
