npmpackage.info

Gathering detailed insights and metrics for @wizteam/react-image-editor

@wizteam/react-image-editor - 3.15.20 | npmpackage.info

@wizteam/react-image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

3.15.20

7,373

MIT

JavaScript

771.16 kB

2.8

Installations

npm install @wizteam/react-image-editor

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

15.14.0

NPM Version

7.7.6 Pull Requests

Open

20

Total

253

Closed

68

Merged

165

Issues

Open

260

Total

689

Closed

429

Releases

v3.15.3

Updated on Apr 25, 2022

v3.15.2

Updated on Oct 20, 2021

v3.15.1

Updated on Oct 20, 2021

v3.15.0

Updated on Jul 28, 2021

v3.14.3

Updated on Apr 08, 2021

v3.14.2

Updated on Mar 25, 2021

View All 38 releases

Languages

JavaScript

Stylus

HTML

TypeScript

CSS

Vue

JavaScript (90.1%)

Stylus (4.44%)

HTML (3.38%)

TypeScript (0.97%)

CSS (0.79%)

Vue (0.33%)

Developer

nhn

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

7,373 Stars

659 Commits

1,342 Forks

103 Watchers

37 Branches

33 Contributors

Updated on Jul 17, 2025

Maintainers

View All 33 Contributors

Package Meta Information

Latest Version

3.15.20

Package Id

@wizteam/react-image-editor@3.15.20

Unpacked Size

771.16 kB

Size

209.14 kB

File Count

NPM Version

7.7.6

Node Version

15.14.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

TOAST UI Image Editor for React

This is a React component wrapping TOAST UI Image Editor.

🚩 Table of Contents

Collect statistics on the use of open source
Install
- Using npm
Usage

Collect statistics on the use of open source

React Wrapper of TOAST UI Image Editor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI Image Editor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the usageStatistics props like the example below.

1<ImageEditor usageStatistics={false} />

Or, include tui-code-snippet.js (v1.4.0 or later) and then immediately write the options as follows:

1tui.usageStatistics = false;

💾 Install

Using npm

1npm install --save @toast-ui/react-image-editor

📊 Usage

Import

You can use Toast UI Image Editor for React as a ECMAScript module or a CommonJS module. As this module does not contain CSS files, you should import tui-image-editor.css from tui-image-editor/dist manually.

Using ECMAScript module

1import 'tui-image-editor/dist/tui-image-editor.css';
2import ImageEditor from '@toast-ui/react-image-editor';

Using CommonJS module

1require('tui-image-editor/dist/tui-image-editor.css');
2const ImageEditor = require('@toast-ui/react-image-editor');

Props

All the options of the TOAST UI Image Editor are supported in the form of props.

1const myTheme = {
2  // Theme object to extends default dark theme.
3};
4
5const MyComponent = () => (
6  <ImageEditor
7    includeUI={{
8      loadImage: {
9        path: 'img/sampleImage.jpg',
10        name: 'SampleImage',
11      },
12      theme: myTheme,
13      menu: ['shape', 'filter'],
14      initMenu: 'filter',
15      uiSize: {
16        width: '1000px',
17        height: '700px',
18      },
19      menuBarPosition: 'bottom',
20    }}
21    cssMaxHeight={500}
22    cssMaxWidth={700}
23    selectionStyle={{
24      cornerSize: 20,
25      rotatingPointOffset: 70,
26    }}
27    usageStatistics={true}
28  />
29);

Theme

Importing black/white-theme.js file is not working directly import yet. You want to use a white theme, please write own theme object by copy and paste.

Instance Methods

For using instance methods of TOAST UI Image Editor, first thing to do is creating Refs of wrapper component using createRef(). But the wrapper component does not provide a way to call instance methods of TOAST UI Image Editor directly. Instead, you can call getInstance() method of the wrapper component to get the instance, and call the methods on it.

1const imageEditorOptions = {
2  // sort of option properties.
3};
4
5class MyComponent extends React.Component {
6  editorRef = React.createRef();
7
8  handleClickButton = () => {
9    const editorInstance = this.editorRef.current.getInstance();
10
11    editorInstance.flipX();
12  };
13
14  render() {
15    return (
16      <>
17        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
18        <button onClick={this.handleClickButton}>Flip image by X Axis!</button>
19      </>
20    );
21  }
22}

Getting the root element

An instance of the wrapper component also provides a handy method for getting the root element. If you want to manipulate the root element directly, you can call getRootElement to get the element.

1class MyComponent extends React.Component {
2  editorRef = React.createRef();
3
4  handleClickButton = () => {
5    this.editorRef.current.getRootElement().classList.add('image-editor-root');
6  };
7
8  render() {
9    return (
10      <>
11        <ImageEditor ref={this.editorRef} {...imageEditorOptions} />
12        <button onClick={this.handleClickButton}>Click!</button>
13      </>
14    );
15  }
16}

Events

All the events of TOAST UI Image Editor are supported in the form of on[EventName] props. The first letter of each event name should be capitalized. For example, for using mousedown event you can use onMousedown prop like the example below.

1class MyComponent extends React.Component {
2  handleMousedown = () => {
3    console.log('Mouse button is downed!');
4  };
5
6  render() {
7    return <ImageEditor onMousedown={this.handleMousedown} />;
8  }
9}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:141: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:34
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:42
Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 8 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

97 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-vp56-6g26-6827
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@wizteam/react-image-editor

Installations

Developer Guide

No

CommonJS

15.14.0

7.7.6

Pull Requests

20

253

68

165

Issues

260

689

429

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

TOAST UI Image Editor for React

🚩 Table of Contents

Collect statistics on the use of open source

💾 Install

Using npm

📊 Usage

Import

Props

Theme

Instance Methods

Getting the root element

Events

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10