React Components that Implement Microsoft's UWP Design & Fluent Design System.
Visit react-uwp.com online to review the API, see the components in action with live.
Or build the documentation to locally.
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-uwpReact-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*asReactfrom"react";import*asReactDOMfrom"react-dom";import{ThemeasUWPThemeProvider,getTheme}from"react-uwp/Theme";importMyComponentfrom"./MyComponent";exportclassAppextendsReact.Component{render(){return(<UWPThemeProvidertheme={getTheme({themeName: "dark",// set custom themeaccent: "#0078D7",// set accent coloruseFluentDesign: 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*asReactfrom"react";importButtonfrom"react-uwp/Button";exportdefaultclassMyComponentextendsReact.Component<void,void>{render(){return(<Buttontooltip="Mini Tooltip"/>)}}Notice: that in the above example, we used:
importButtonfrom"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.
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.
