Skip to content

pikasojs/pikaso-react-hook

Repository files navigation

pikaso-react-hook

React hook for Pikaso

Language Test, Build and Publish npm coverage

Install

NPM

npm install pikaso-react-hook --save

Yarn

yard add pikaso-react-hook

Getting Started

import React from 'react'
import usePikaso from 'pikaso-react-hook'

export function Component() {
  const [ref, editor] = usePikaso()
  
  const createCircle = () => {
    editor.shapes.circle.insert({
      x: 200,
      y: 200,
      radius: 50,
      fill: 'red'
    })
  }

  return (
    <>
      <div
        ref={ref}
        style={{
          background: '#ccc',
          width: '400px',
          height: '400px'
        }}
      />
      
      <button onClick={createCircle}>Create Circle</button>
    </>
  )
}

Demo

https://codesandbox.io/s/pikaso-react-hook-example-i0uwg

Documentation

https://github.com/pikasojs/pikaso