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].

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

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

PropertyTypeRequired?ArgumentsDescription
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

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

MethodDescription
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

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

Metadata

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