albinotonnina / react-magic-hat Goto Github PK

View Code? Open in Web Editor NEW

311.0 13.0 15.0 121 KB

🎩✨Library to implement the Magic Hat technique, blazingly fast 🚀

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

License: Apache License 2.0

JavaScript 100.00%

ui ux-research motion react library ux ux-patterns

react-magic-hat's Introduction

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

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

react-magic-hat's People

Contributors

Stargazers

Watchers

Forkers

ajeetbpr derickwarshaw wizyma ninjaravi pjwalker luyx2412 terribledev willnguyen1312 40a hungdluit90 barrymaswan sebashmh soltrinox rashidtvmr nesrinehamrouni

react-magic-hat's Issues

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Objectives

learning
saving space, react-flip-move covers cases we don't really need.

References

https://css-tricks.com/animating-layouts-with-the-flip-technique

[WIP] Reordering in react-flip-move causes effects on MUVs

Such as resetting scroll positions inside MUVs.
cause: https://github.com/joshwcomeau/react-flip-move/blob/master/src/FlipMove.js#L313-L326

Minor Documentation Issue

Just a small question, in this example,

import YourMagicContainer from 'react-magic-hat'
import ComponentA, {id as CompA} from 'components'
import ComponentB from 'components'

const renderFrame = ({id, actions}) => {
  const Component = id === CompA ? ComponentA : ComponentB

  return <Component {...props} {...actions} />
}

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

Where is the props coming from in the renderFrame function? Should there be another argument destructured from pageObject? Thanks!