react-magic-hat
v1.1.1
Published
A kind of UI engine
Downloads
40
Maintainers
Readme
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
| 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
Contribute
PRs accepted.
License
MIT © 2018 Albino Tonnina