Build Windows native look & feel apps using ReactJS. Provides a set of accessible, reusable and composable react components that make it super easy to create websites and apps.
MIT License
Bot releases are hidden (Show)
react-win-ui
v4.2.2react-router-dom
- Now you can use any Routing library
.ViteJS
, NextJS
and CRA
, See #23 .refs
and value
, See - #25 .TableView
for unique key and also added TableHeaderComponent
& TableFooterComponent
.LoaderBusy
with Win11 UI.ScrollBar
with latest Win11 UI.Happy Coding :)
Published by virtualvivek almost 2 years ago
TextArea
#21.SelectText
component.PrimaryColorLight
color support for AppTheme
component.AvatarView
to display placeholders.CommantBar
component.NavSearchSuggetion
to NavBarSearchSuggetion
.NavThemeSwitcher
to NavBarThemeSwitch
.Happy Coding :)
Published by virtualvivek about 2 years ago
Published by virtualvivek about 2 years ago
CRA Template
introduced for easing the project setup.NavBar
now follows the up-to-date fluent design system for mobile devices.NavThemeSwitcher
added for better theme switching.SplashScreen
added for displaying a content while page loading.react-router-dom
-v6.3.0.Switch has been replaced with Routes.
component={ } has been replaced with element={ }
Published by virtualvivek almost 3 years ago
NavBar
improved positioning.AppTheme
fixed issue with scheme prop on mount see #12 .Switch
removed extra end margin and make it flex wrap.TransitionToLeft
component , now NavPageContainer
not needed to register animation configs on root.NavPageContainer can now independently register animations on mount by configuring props.
Published by virtualvivek almost 3 years ago
NavPageContainer
now don't require TransitionToLeft registering.NavBar
component improved on mobile devices.Alert
component improvement.Switch
improved rendering, fixes extra margin bug.Dialog
improved rendering and touch responses.InputText
component improved rendering.Published by virtualvivek almost 3 years ago
CommandBar
& CommandBarButton
component added see #15 .Select
animations component.MenuBar
added prop showSearchBar
for optional serachInput rendering.SplashScreen
added prop duration
to control additional time take to hide after render.Published by virtualvivek almost 3 years ago
AppTheme
added scheme
: 'system'
prop option.AppTheme
added onMount
prop.CheckBox
improved toggle animations.NavBar
improved ui - now more compact.SplashScreen
component added.Published by virtualvivek almost 3 years ago
NavBar
added prop showThemeSwitch
to toggle theme switch rendering requested in #12NavBarSubMenu
component added for multi level menu for NavBar requested in #6Select
component added for implementing react custom select requested in #6Appearance
component added to get a way to handle theme better requested in #11AppTheme
addd prop onSchemeChange
& onColorChange
for theme change listener requested in #11Button
improved ui and touch interface.View
added component provide container component with visibility and animation features.Gauge
improved ui and added prop size
to get alter width & height of choice.Published by virtualvivek about 3 years ago
Published by virtualvivek over 3 years ago
The project now has better cross browser support.
template
.Now you can initialize your project with the predefined react-windows-ui template.
You can also clone the boilerplate repo:
$ git clone https://github.com/virtualvivek/react-windows-ui-boilerplate.git
$ cd react-windows-ui-boilerplate
$ npm install
$ npm start
InputText
- Label
width.Now Label with can auto adjust according to the text.
TextArea
- line-height
.previously some buggy collapsed text issue is there is solved now.
Published by virtualvivek over 3 years ago
Typescript type definitions
- see full issue #3react-windows-ui-sunvalley.min.css
styles from new win design pattern.react-windows-ui-rtl.min.css
for right to left direction support.onError
prop to AvatarView
and ImageView
.Now AvatarView and ImageView provides onError callbacks and fixed loading animation will close on error.
TableView
component.TableView component includes toggle arranging columns, searchable columns, able to add jsx components
refer demo for full implementation
.
app-nav-toggle
animation.SideBar Navigation Toggle collapsing animation now work smoothly.
Published by virtualvivek over 3 years ago
feat:
added prop tooltip
:<Component tooltip="hover tooltip title" />
tooltip
added for following components:
feat:
added component <TransitionToLeft
/> :Add TransitionToLeft to the app Router:
App.js
<Router>
<TransitionToLeft />
</Router>
Control Transition fallback to child NavPageContainer using prop
animateTransition={true}
Page.js
<NavPageContainer
animateTransition={true}>
...
</NavPageContainer>
fix:
component Alert
:Fixes setTheme="light" on mozilla browsers.
feat:
component Gauge
:Added prop
type="fill"
:
Default: type="border"
<Gauge
type="fill"
/>
Published by virtualvivek over 3 years ago
Changelog -
Accordion
component.Alert
setTheme="light" prop.ButtonIcon
component.Button
added props
-NavSearchBox
component.InputSearchSuggestion
added onClick={ } prop.MenuBar
added onClick={ } prop.LoaderBar
added isLoading={boolean} prop.LoaderBusy
added props
-Published by virtualvivek over 3 years ago
ChangeLog
LoaderBar
: added setTheme
prop for light ui theme.LoaderBusy
: added setTheme
prop for light ui theme.NavBar
fixed scrollbar positioning ( clipped to top ).App's ScrollBar
fixed scrolling behavior now serves as an overlay.NavPageContainerInner
: fixed padding on mobile view.Published by virtualvivek over 3 years ago
Changelog
Alert
: added light
theme.Button
: added type - primary-outline
, success-outline
, danger-outline
.ButtonFluent
added component with windows fluent effect.Gauge
added type - outline
, fill
- default outline.LinkCompoundFluent
added component with windows fluent effect.LoaderBar
added isLoading
prop to control visibility behaviour.LoaderBusy
added isLoading
prop to control visibility behaviour.ProgressBarIndeterminate
added isLoading
prop to control visibility behaviour.Published by virtualvivek over 3 years ago
Changelog
NavBarLinkFluent
ButtonFluent
LinkCompoundFluent
AvatarView
LoaderBusy
Dialog
on low end devicesPublished by virtualvivek over 3 years ago
Changelog
now icons file have only most used icons for production build to occupy less size
Button
Button
ImageView
─────────────────────
───────────████████──
──────────███▄███████
──────────███████████
──────────██████─────
──────────█████████──
█───────███████──────
██────████████████───
███──██████████──█───
███████████████──────
─█████████████───────
──███████████────────
────████████─────────
─────███──██─────────
─────█─────█─────────
─────██────██────────
─────────────────────
Published by virtualvivek over 3 years ago
Changelog
components added
View
Button
InputText
.CommandBar
zIndex, now has zIndex as prop.NavBar
.─────────────────────
───────────████████──
──────────███▄███████
──────────███████████
──────────██████─────
──────────█████████──
█───────███████──────
██────████████████───
███──██████████──█───
███████████████──────
─█████████████───────
──███████████────────
────████████─────────
─────███──██─────────
─────█─────█─────────
─────██────██────────
─────────────────────
Published by virtualvivek over 3 years ago
Changelog
components added
changes
Alert
component.NavBar
.success
, danger
, loading
.─────────────────────
───────────████████──
──────────███▄███████
──────────███████████
──────────██████─────
──────────█████████──
█───────███████──────
██────████████████───
███──██████████──█───
███████████████──────
─█████████████───────
──███████████────────
────████████─────────
─────███──██─────────
─────█─────█─────────
─────██────██────────
─────────────────────