Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-magic-hat with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactMagicHat = require("react-magic-hat")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-magic-hat v1.1.1

A kind of UI engine

Dependency Up-to-dateness Codacy Badge Build Status

React Magic Hat 🎩✨

A kind of UI technique

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


🚀 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


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


yarn add react-magic-hat


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

  return <Muv {...actions} {...state} />

const Layout = () => (
    <YourMagicContainer renderFrame={renderFrame} />


Prop Types

renderFrameFunctionDocumentationCallback invoked when rendering the visible pages.
onStartAnimationFunctionchildElements, domElements, pageProps
onEndAnimationFunctionchildElements, domElements, pageProps
flipMoveOptionsFunction{pagesLength, visiblePagesLength, singleFrame}Override react-flip-move configuration.
singleFrameBooleanBy default show two views. Set this to true to show only one.
moveSeedStringChange this to force animations, it will be appended to the view keys read when we need this


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

setCurrentFrame(props:object)Merge props on the current page
getCurrentFrame():objectGet 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):propsGet props of a page
closeFrame(page:number)Close a page


Basic demo on codesandbox

React-create-app Demo




PRs accepted.


MIT © 2018 Albino Tonnina


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free