React Magic Hat 🎩✨

A kind of UI technique

React implementation of what I call the Magic Hat UI technique [DEMO].

Features

🚀 Blazing fast. 60+ FPS hardware-accelerated CSS transforms, using the FLIP technique. Fluid and performant. Thanks to react-flip-move for that.

🎈Extra light, only 6.5kb and no dependencies.

🧘‍Flexible, stateful or stateless (you get both components) it’s UI-less, you do the layouting and styling.

🎛 Highly configurable, check the API

Table of Contents

• Background
• Install
• Usage
• API
• Demos
• Maintainers
• Contribute
• License

Background

The Magic Hat is a technique with the purpose of reducing the the total amount of mental effort that is required to complete a task involving processing of information, in short cognitive load, by limiting the amount of UI on the screen in favour of a runtime like linked list of sequential self sufficient UIs called MUVs (Minimum Usable Views) It's called like this because in a view the user can pick the next thing to put on screen. It’s pretty much it.

Read the article on medium.com

Install

yarn add react-magic-hat

Usage

import YourMagicContainer from 'react-magic-hat'
import ComponentA, {id as CompA} from 'components'
import ComponentB from 'components'
 
const renderFrame = pageObject => {
  // Please check the renderFrame(pageObject) documentation for all the properties passed to the pageObject.
  const {id, actions, state} = pageObject
 
  // We get the Component that is going to be rendered, the following is probably the most naive way.
  const Muv = id === CompA ? ComponentA : ComponentB
 
  // Another way to do it in the demo, using import-glob
  // https://github.com/albinotonnina/demo-magic-hat/blob/master/src/Demo.js#L5-L21
 
  return <Muv {...actions} {...state} />
}
 
const Layout = () => (
  <div>
    <YourMagicContainer renderFrame={renderFrame} />
  </div>
)

API

Prop Types

Property	Type	Required?	Arguments	Description
renderFrame	Function	✓	Documentation	Callback invoked when rendering the visible pages.
onStartAnimation	Function		childElements, domElements, pageProps
onEndAnimation	Function		childElements, domElements, pageProps
flipMoveOptions	Function		{pagesLength, visiblePagesLength, singleFrame}	Override react-flip-move configuration.
singleFrame	Boolean			By default show two views. Set this to true to show only one.
moveSeed	String			Change this to force animations, it will be appended to the view keys read when we need this

renderFrame(pageObject)

import getComponentById from './your-components'
 
const renderFrame = pageObject => {
  const {
    id, // 'my-component-id' 
    page, // 4
    activePage, // 5
    state, // { roses: 'blue', violets: 'red', pass:'whetever', pleases: 'you' }
    actions // see next paragraph for the actions methods
  } = pageObject
 
  const Muv = getComponentById(id) // return a Component
 
  return <Muv {...state} {...actions} />
}

{actions} API

Method	Description
setCurrentFrame(props:object)	Merge props on the current page
getCurrentFrame():object	Get props of the current page
closeCurrentFrame()	Close the current page
setNextFrame(id:string, props:object )	Merge the next page and optionally pass props
getNextFrame()	Get props of the next page
closeNextFrame()	Close the next page
setFrame(page:number, id:string, props:object)	Merge the next page
getFrame(page:number):props	Get props of a page
closeFrame(page:number)	Close a page

Demos

Basic demo on codesandbox

https://codesandbox.io/s/r4v7onrpop

React-create-app Demo

https://albinotonnina.github.io/demo-magic-hat

https://github.com/albinotonnina/demo-magic-hat

Maintainers

@albinotonnina

Contribute

PRs accepted.

License

MIT © 2018 Albino Tonnina