ows2-react-sketch

v0.6.6

Sketch Element for React based applications, backed-up by fabricjs as its core For more information about how to use this package see README

Latest version published 3 years ago

License: MIT

NPM

GitHub

Package Health Score

54 / 100

security
No known security issues
popularity
Limited
maintenance
Inactive
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
0.6.6	\|	09/2021	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.5.9	\|	03/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Limited

Weekly Downloads (0)

GitHub Stars: 684
Forks: 230
Contributors: 20

Direct Usage Popularity

The npm package ows2-react-sketch receives a total of 0 downloads a week. As such, we scored ows2-react-sketch popularity level to be Limited.

Based on project statistics from the GitHub repository for the npm package ows2-react-sketch, we found that it has been starred 684 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: Yes
Contributors: 20
Funding: No

With more than 10 contributors for the ows2-react-sketch repository, this is possibly a sign for a growing and inviting community.

Embed Package Health Score Badge

Maintenance

Inactive

Commit Frequency

No Recent Commits

Open Issues: 55
Open PR: 22
Last Release: 3 years ago
Last Commit: 3 years ago

Further analysis of the maintenance status of ows2-react-sketch based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Inactive.

An important project maintenance signal to consider for ows2-react-sketch is that it hasn't seen any new versions released to npm in the past 12 months, and could be considered as a discontinued project, or that which receives low attention from its maintainers.

In the past month we didn't find any pull request activity or change in issues status has been detected for the GitHub repository.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >= 8

Age: 6 years
Dependencies: 3 Direct
Versions: 17
Install Size: 381 kB
Dist-tags: 1
# of Files: 12
Maintainers: 2
TS Typings: Yes

ows2-react-sketch has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

react-sketch

A Sketch tool for React based applications, backed-up by FabricJS

idea-image Please note that this module is still in development! Feel free to send me enhancements and ideas 😃

Installation

npm install react-sketch --save

or with yarn

yarn add react-sketch

Source installation

In order to build from source, read the relevant instructions first.

Tested with node versions 6,7,8.

Usage

Import the relevant SketchField component and use it, you can find more on the examples folder of the project

import {SketchField, Tools} from 'react-sketch';

class SketchFieldDemo extends React.Component {
     render() {
        return (
            
        )
     }
}

Configuration Options

Option	Type	Default	Description
tool	Enumeration (string)	pencil	The tool to use, can be select, pencil, circle, rectangle, pan
lineColor	String	black	The color of the line
lineWidth	Number	1	The width of the line
fillColor	String	transparent	The fill color (hex format) of the shape when applicable (e.g. circle)
backgroundColor	String	transparent	The the background color of the sketch in hex or rgba
undoSteps	Number	15	number of undo/redo steps to maintain
imageFormat	String	png	image format when calling toDataURL, can be png or jpeg
width	Number	No Value(null)	Set/control the canvas width, if left empty the sketch will scale to parent element
height	Number	512	Set/control the canvas height, if left empty the sketch will take a reasonable default height
value	JSON		Property to utilize and handle the sketch data as controlled component
defaultValue	JSON		Default initial data, to load. If value is set then value will be loaded instead
widthCorrection	Number	2	Specify some width correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style
heightCorrection	Number	0	Specify some height correction which will be applied on resize of canvas, this will help to correct some possible border on the canvas style
onObjectAdded	Function	null	Callback when element is added
onObjectModified	Function	null	Callback when element is modified
onObjectRemoved	Function	null	Callback when element is removed

Available tools

Tool	Description
Pencil	Free drawing pencil
Line	Gives you the ability to draw lines
Rectangle	Create rectangles
Circle	Create circles
Rectangle	Create Rectangles
Select	Disables drawing and gives you the ability to modify existing elements in the canvas
Pan	Disables drawing and gives you the ability to move the complete canvas at will, useful to adjust the canvas when zooming in or out (thank you wmaillard)

Examples

The project includes a webpack server for running the examples, just run:

git clone https://github.com/tbolis/react-sketch.git
yarn install
npm start

and navigate to https://localhost:23000

You can as well check the live showcase here: https://tbolis.github.io/showcase/react-sketch/

Issues

See https://github.com/tbolis/react-sketch/issues

Changelog

See https://github.com/tbolis/react-sketch/blob/master/CHANGELOG.md

License

MIT, do remember to add a reference if you find it useful 😃

ows2-react-sketch dependencies

prop-types react react-dom

ows2-react-sketch development dependencies

@babel/cli @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-proposal-export-namespace-from @babel/plugin-proposal-function-sent @babel/plugin-proposal-json-strings @babel/plugin-proposal-numeric-separator @babel/plugin-proposal-throw-expressions @babel/plugin-syntax-dynamic-import @babel/plugin-syntax-import-meta @babel/plugin-transform-runtime @babel/polyfill @babel/preset-env @babel/preset-react @babel/register @babel/runtime @material-ui/core @material-ui/icons @material-ui/lab babel-core babel-eslint babel-jest babel-loader babel-plugin-lodash canvas cross-env css-loader enzyme enzyme-adapter-react-16 eslint eslint-config-airbnb eslint-loader eslint-plugin-import eslint-plugin-jest eslint-plugin-jsx-a11y eslint-plugin-react eslint-watch fabric flexboxgrid html-webpack-plugin jasmine-core jest jest-environment-jsdom jest-enzyme lint-staged my-local-ip open open-browser-webpack-plugin postcss-loader react-color react-dropzone react-hot-loader react-test-renderer react-transform-hmr rimraf style-loader uglifyjs-webpack-plugin webpack webpack-cli webpack-dev-server weinre

FAQs

What is ows2-react-sketch?

Sketch Element for React based applications, backed-up by fabricjs as its core. Visit Snyk Advisor to see a full health score report for ows2-react-sketch, including popularity, security, maintenance & community analysis.

Is ows2-react-sketch popular?

We’re still processing downloads data for the npm package ows2-react-sketch. Visit the popularity section on Snyk Advisor to see the full popularity analysis.

Is ows2-react-sketch well maintained?

We found indications that ows2-react-sketch is an Inactive project. See the full package health analysis to learn more about the package maintenance status.

Is ows2-react-sketch safe to use?

The npm package ows2-react-sketch was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 11 November-2024, at 11:52 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (0)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

react-sketch

Installation

Source installation

Usage

Examples

Issues

Changelog

License

ows2-react-sketch dependencies

ows2-react-sketch development dependencies

FAQs

What is ows2-react-sketch?

Is ows2-react-sketch popular?

Is ows2-react-sketch well maintained?

Is ows2-react-sketch safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues