Wreactui

This page condensates information about the Wreactui component that you may have already seen in Dark theme, Installation and Customization, but gives more details.

Import

import { Wreactui } from '@narimanb/wreactui'

Base

The default Wreactui component must encapsulate your root component and it doesn't apply any changes by default.

This is only recommended if you just want to provide a single light theme.

Code

// App.js

<Wreactui>
  <App />
</Wreactui>

Use preferences

The usePreferences prop enables these features:

• Theme toggler to switch between themes.
• prefers-color-scheme support to automatically change to dark theme if user prefers 'dark'
• localStorage storing for user preferences so it's consistent on every visit/load.

All of it taken care with single prop

Code

// App.js

<Wreactui usePreferences>
  <App />
</Wreactui>

Dark as default

The dark prop turns the dark theme the default.

Code

// App.js

<Wreactui dark>
  <App />
</Wreactui>

Custom theme

You can merge a custom theme (that is, you don't need to create a complete theme, just changing little bits is enough) using the theme prop.

Code

// App.js

<Wreactui theme={myTheme}>
  <App />
</Wreactui>

Props overview

Prop	Description	Type	Default
usePreferences	apply user theme preferences and provide utilities	boolean	false
dark	define dark theme as default	boolean
theme	theme to merge with defaultTheme	objcet