react-mapping
TypeScript icon, indicating that this package has built-in type declarations

0.0.1 • Public • Published

React-mapping

Video projection mapping library in React.

Contain the following component:

  • Layer: Allow you to transform the children element as you wish (3d tranform and translate)
  • Grid: Add a background grid to help with accuracy while you are mapping in edit mode

This is a work in progress library.

Documentation

Layer

Allow you to transform the children element as you wish (3d tranform and translate)

How to use

  <Layer isEditMode={true}>
    <video src="A_VIDEO_SOURCE" style={{ width: 640, height: 390 }}/>
  </Layer>

Properties

  • style : React.CSSProperties Style applied to the container of the children element
  • anchorStyle : React.CSSProperties Style applied to the anchor component
  • className : string Classes applied to the container of the children element
  • anchorClassName : string Classes applied to the anchor component
  • isEditMode : boolean if true, switch to edit mode and make anchors visible, if false, switch to view mode and anchor are not visible.
  • x : number Initial x position of the child element
  • y : number Initial y position of the child element

Grid

How to use

  <Grid/>

Properties

  • rows : number number of rows to display
  • columns : number number of columns to display

TODO

Layer

  • Add layer grid

  • Add magnet

  • Add reset functionality

  • Add more key controls

  • Add save to localstorage

  • Add layer container style when selecting a layer

  • Add the library to http://tangiblejs.com/

Thanks

This library has been inspired from the following blog posts / library:

Package Sidebar

Install

npm i react-mapping

Weekly Downloads

1

Version

0.0.1

License

ISC

Last publish

Collaborators

  • alex3165