npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-drawarea

v1.1.2

Published

React components to draw with mouse or touch events

Downloads

27

Readme

React DrawArea

Simple package that provide React components to draw lines using mouse or touch events.

Demo

Take a look to this tool in action HERE.

Prerequisites

  • React >= 16.8

Installation

npm install react-drawarea --save

Usage

This package provides to your application DrawArea component and DrawContext context.

DrawArea component can have several optional props:

  • className: To handle styles, simple. Default: ''.
  • color: Color of lines. It can be an hex color or a named color. Default: #000000.
  • disabled: Prevent new lines to be drawed. It still shows existing lines. Default: false.
  • hidden: Hide whole component. Lines are still stored to be able to show them again until you unmount component or use reset feature. Default: false.
  • thickness: Lines thickness (in pixels). Default: 10.

DrawArea component can have also children components. This component will be able to access some features by using useContext hook and DrawContext (see samples below). Properties accesible by using this context are:

  • lines: An array of current lines. Each line is an array of points. Each point is an object containing properties x and y, both of them numbers.
  • isDrawing: A boolean which is true while a line is being drawn. Otherwise it is false.
  • reset: This method removes all lines when it is called.
  • undo: This method removes last drawed line when it is called.

Keep in mind this component has no styles, so you should set at least its size to be able to use it. You should handle this by providing a className and setting styles to it. Same if you want to be able to draw over some other element or something special. Be creative! 😉

Simple:

import * as React from 'react'
import { DrawArea } from 'react-drawarea'

export const Sample = () => <DrawArea className="drawarea" />

With options:

import * as React from 'react'
import { DrawArea } from 'react-drawarea'

export const Sample = () => {
  const [paused, setPaused] = React.useState(false)
  const [hidden, setHidden] = React.useState(false)

  return (
    <>
      <DrawArea
        className="drawarea"
        color="#ba324f"
        disabled={paused}
        hidden={hidden}
        thickness={20}
      />
      <button onClick={() => setPaused(paused => !paused)}>PAUSE</button>
      <button onClick={() => setHidden(hidden => !hidden)}>HIDE</button>
    </>
  )
}

Reset and undo buttons:

import * as React from 'react'
import { DrawArea, DrawContext } from 'react-drawarea'

const Buttons = () => {
  const { reset, undo } = React.useContext(DrawContext)

  return (
    <>
      <button onClick={reset}>RESET</button>
      <button onClick={undo}>UNDO</button>
    </>
  )
}

export const Sample = () => (
  <DrawArea className="drawarea">
    <img src="background.png" />
    <Buttons />
  </DrawArea>
)