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

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