https://github.com/react-paper/react-paper-bindings

Paper.js bindings for React
https://github.com/react-paper/react-paper-bindings

canvas paperjs react reactfiber reconciler

Last synced: 5 days ago
JSON representation

Paper.js bindings for React

• Host: GitHub
• URL: https://github.com/react-paper/react-paper-bindings
• Owner: react-paper
• Created: 2016-01-21T14:50:44.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2023-03-04T01:25:58.000Z (almost 2 years ago)
• Last Synced: 2025-01-20T05:12:40.863Z (24 days ago)
• Topics: canvas, paperjs, react, reactfiber, reconciler
• Language: JavaScript
• Homepage: http://react-paper.github.io/react-paper-bindings/
• Size: 11.1 MB
• Stars: 194
• Watchers: 6
• Forks: 36
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Paper.js bindings for React Fiber

## Demo

http://react-paper.github.io/react-paper-bindings/

## Development

Start watching `src` with babel

```

cd react-paper-bindings

npm start

```

Link the library to the demo

```

# npm link the library

cd react-paper-bindings

npm link

cd demo

npm link react-paper-bindings

```

Start demo with `create-react-app`

```

cd demo

npm start

```

If someone knows a better way, please let me know ;)

## Similar projects

- [react-paperjs](https://github.com/psychobolt/react-paperjs)

## Example

```jsx

import React, { Component } from 'react'

import {

  View,

  Layer,

  Group,

  Path,

  Circle,

  Ellipse,

  Rectangle,

  PointText,

  Tool,

} from 'react-paper-bindings'

const ReactLogo = ({ rotation, x, y }) => {

  return (

    

      

      

      

      

    

  )

}

const Paper = ({ activeTool, circles, rectangles, width, height }) => {

  return (

    

      

        {circles.map(circle => )}

      

      

        {rectangles.map(rectangle => )}

      

      

        

        

        

      

      

      

      

      

    

  )

}

```