uxfw-react v1.0.0

UXFW

User Experience Framework to ease the implementation of user preferences on a React App

Table of Contents

• Features

• Browser Support

• Installing

• Example

• UXFW API

• License

Features

-

Browser Support

Latest ✔	Latest ✔	Latest ✔

Installing

Using npm:

$ npm install uxfw-react

Using yarn:

$ yarn add uxfw-react

Example

First, to define the preferences the following structure is recommended but it can vary depending on the libraries that the developer is relying on to implement some of this functionalities.

const preferences = {
	themeList:{
		light:{
			alias: "theme_light",
			primary: {
				main:  "blue",
				contrastText:  "white"
			},
			secondary: {
				main:  "purple",
				contrastText:  "white",
			text: {
				primary:  "black",
				secondary:  "gray",
				icon:  "black",
			},
			background: {
				card:  "lightgray",
				default:  "white"
			},
		}
	},
	layoutList: {
		ltr : {
			alias: "layout_ltr",
			appbar_button: "left",
			fab_button: "right"
		}
	},
	languageList: {
		en: {
			alias: "lang_en",
			page: {
				title: "Title",
				submit_button: "Submit",
				cancel_button: "Cancel"
			}
		}
	},
	typographyList: {
		default: {
			alias: "typo_default",
			fontSize: "1rem",
			fontWeight: "normal",
			fontFamily: "initial",
		}
	},
	// Default values for each preference
	theme: "light",
	layout: "ltr",
	language: "en",
	typography: "default",
	// Storage to persist preferences
	storage: window.localStorage
}

As we can see in the example below where we implement the language preference for the web site, it is not always necessary to provide all the preferences defined by the library.

import { useUXFW, UXFWProvider } from "uxfw-react";

const pref = {
   // Definition of app preferences as indicated above
   languageList: {
      en: {
         title: "Title",
      },
      es: {
         title: "Titulo",
      },
   },
   // Default value for the language preference
   language: "en",
   // Type of storage to use for persistence
   storage: window.localStorage,
};
// First, it is necessary to contain the App at the top level with the Provider
function App() {
   return (
      <UXFWProvider preferences={pref}>
         <Test />
      </UXFWProvider>
   );
}
// Then, we can use the useUXFW hook to access the preferences actions and values
function Test() {
   const uxfw = useUXFW();
   // Here we use the withDef parameter to retrieve the definition of the selected preference
   const language = uxfw.getLanguage({ withDef: true });

   function toggleLanguage() {
      // We only need to provide the preference option key assigned when initializing the library
      if (language.name === "en") {
         uxfw.setLanguage("es");
      } else {
         uxfw.setLanguage("en");
      }
   }

   return (
      <div>
         {/* The title will update when pressing the button*/}
         <h6>{language.def.title}</h6>
         <button>Change Language</button>
      </div>
   );
}

UXFW API

License

MIT