Cropperjs as React component

Overview

react-cropper

Cropperjs as React component

NPM NPM NPM downloads Dependencies Language grade: JavaScript Total alerts Bundle Size minZip Bundle Size min License codecov

Demo

Click for a Demo

Docs

Installation

Install via npm

npm install --save react-cropper

You need cropper.css in your project which is from cropperjs. Since this project have dependency on cropperjs, it located in /node_modules/react-cropper/node_modules/cropperjs/dist/cropper.css or node_modules/cropperjs/dist/cropper.css for npm version 3.0.0 later

Breaking Change (version >= 2.0.0)

  1. Support for ref has been removed. Use the onInitialized method to get the cropper instance. Added back ref support in 2.1.0.
  2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
  3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
  4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
  5. React Cropper does not depend on @types/react-cropper and provides its own types. Please uninstall/remove @types/react-cropper as they might 'cause issues.

Quick Example

import React, { useRef } from "react";
import Cropper from "react-cropper";
import "cropperjs/dist/cropper.css";

const Demo: React.FC = () => {
  const cropperRef = useRef<HTMLImageElement>(null);
  const onCrop = () => {
    const imageElement: any = cropperRef?.current;
    const cropper: any = imageElement?.cropper;
    console.log(cropper.getCroppedCanvas().toDataURL());
  };

  return (
    <Cropper
      src="https://raw.githubusercontent.com/roadmanfong/react-cropper/master/example/img/child.jpg"
      style={{ height: 400, width: "100%" }}
      // Cropper.js options
      initialAspectRatio={16 / 9}
      guides={false}
      crop={onCrop}
      ref={cropperRef}
    />
  );
};

Options

src

  • Type: string
  • Default: null
<Cropper src="http://fengyuanchen.github.io/cropper/images/picture.jpg" />

alt

  • Type: string
  • Default: picture

crossOrigin

  • Type: string
  • Default: null

dragMode

https://github.com/fengyuanchen/cropperjs#dragmode

scaleX

https://github.com/fengyuanchen/cropperjs#scalexscalex

scaleY

https://github.com/fengyuanchen/cropperjs#scalexscaley

enable

https://github.com/fengyuanchen/cropperjs#enable

disable

https://github.com/fengyuanchen/cropperjs#disable

zoomTo

https://github.com/fengyuanchen/cropperjs#zoomto

rotateTo

https://github.com/fengyuanchen/cropperjs#rotateto

Other options

Accept all options in the docs as properties.

Methods

Use the cropper instance from onInitialized to access cropperjs methods

Build

npm run build

Development

npm start

Author

Fong Kuanghuei

Maintainer

Shubhendu Shekhar

License

MIT

Comments
  • function passed to crop prop doesn't get updated cropper instance

    function passed to crop prop doesn't get updated cropper instance

    I'm not sure if I'm doing something wrong here. On crop I need to read the width and height. With previous version <2.0 with ref it worked by calling getCropBoxData. Now I can't get the instance in the function passed to crop anymore.

    I've prepared a very small codesandbox to state my issue: https://codesandbox.io/s/zealous-firefly-f2bqc?file=/src/App.js

    Can you please have a look at line 11 in App.js?

    bug PR 
    opened by duc-gp 13
  • Can't zoom the image on mobile device.

    Can't zoom the image on mobile device.

    In my mobile chrome. if I try to zoom the image itself, (not the crop box). The picture will be lost。

    But cropperjs's demo is ok.

    after zoom image use fingers:

    2017-03-23_162023

    Regards.

    opened by shikelong 13
  • Is This Package Still Maintained ?

    Is This Package Still Maintained ?

    It's been months since the last commit, Is it still safe to use ? Will cropperjs updates be applied to react-cropper ? Should we use another package ?

    Thanks !

    stale 
    opened by Aetherall 12
  • Trying to restore previous crop data

    Trying to restore previous crop data

    I'm using v2.1.7 and when I pull the crop data using cropperRef.getData() and then pass this to the component property data, the previous crop data doesn't restore on the image:

    <Cropper
        data={previousCropData}
        />
    

    I've also tried setting this using the onInitialized callback, but same issue:

    <Cropper
        onInitialized={(instance) => {
            instance.setData(previousCropData);
        }}
    />
    

    I've also tried passing in getCropBoxData() object as well to the same effect. Am I doing this correctly? or is this broken?

    Thanks.

    bug stale 
    opened by orderwerks 10
  • react-cropper not rendering image when viewMode and zoomTo both are set to 0

    react-cropper not rendering image when viewMode and zoomTo both are set to 0

    I was using react-cropper with version 2.0.0. It was working properly. but when I updated it with the latest version(2.1.0). It is showing me a blank image after selecting an image and no crop functionality is applying on it.

    You see the below screenshot: using 2.0.0 image

    using 2.1.0 image

    I need immediate the solution to this issue because I'm using this into my project.

    bug confirmed 
    opened by Chetnatl 9
  • aspectRatio not working

    aspectRatio not working

    I want to make a crop area ratio that changes with the click of a button. Declared the ratio to state and set it to aspectRatio for the Cropper component.

    Like this, const [ratio, setRatio] = useState(1); .... <Cropper ... aspectRatio={ratio} ... />

    However, even if the ratio changes, there is no change in the screen.

    I added a button to the demo to set the ratio. but it's not working Here is codesandbox : https://codesandbox.io/s/react-cropper-ratio-o8p5g?file=/src/Demo.tsx:1319-1900

    any solution?

    bug 
    opened by grighth12 8
  • checkCrossOrigin={false} causes: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    checkCrossOrigin={false} causes: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    I recently tried this component again and notcied that when using any image (Im using the test url)

    Im not sure why I keep getting this message. Im attempting to create a window around the cropper so the user can save what they have in frame.

    Here's an example: https://codesandbox.io/s/react-cropper-demo-forked-5jehf

    I need the flag for my signedURLs (CORs), so removing it isnt an option.

    bug stale 
    opened by developdeez 8
  • [v2.1.0] react-cropper not rendering when ref not passed

    [v2.1.0] react-cropper not rendering when ref not passed

    Hi again,

    I just tried out the new version and somehow something seems not to work as expected anymore with the src prop

    here its working version: 2.0.0: https://codesandbox.io/s/cropper-second-bug-working-bcqp5?file=/src/App.js

    here same code not working 2.1.0: https://codesandbox.io/s/cropper-second-bug-not-working-seu0e

    code is the same, only difference is version number

    bug 
    opened by duc-gp 7
  • Property 'ref' does not exist on type 'IntrinsicAttributes & ReactCropperProps & { children?: ReactNode; }'.

    Property 'ref' does not exist on type 'IntrinsicAttributes & ReactCropperProps & { children?: ReactNode; }'.

    Before creating a bug/issue here please check that it is not part of cropperjs and does not exist in the cropperjs repo.

    Describe the bug dependencies info: react-cropper: 2.0.0 @types/react-cropper: 1.3.0

    bug: Property 'ref' does not exist on type 'IntrinsicAttributes & ReactCropperProps & { children?: ReactNode; }'.

    code:

    import React, { useEffect, useState, useRef } from 'react'; import Cropper from 'react-cropper'; import 'cropperjs/dist/cropper.css';

    const ReviewWatermarkPage = (props: any) => { const [src, setSrc] = useState('./test.jpg'); const cropperRef = useRef<Cropper | undefined>(null); return ( <Cropper src={src} ref={cropperRef} viewMode={1} zoomable={false} aspectRatio={1} // 固定为1:1 可以自己设置比例, 默认情况为自由比例 guides={false} cropend={() => { console.log(cropperRef.current.getCroppedCanvas()); }} /> ); };

    bug 
    opened by summer996 7
  • Unused property warning in React 15.2.0

    Unused property warning in React 15.2.0

    With React 15.2.0, any unrecognized props assigned to DOM elements will throw a warning. In the case of this library, the following warning occurs:

    Warning: 
    Unknown props `aspectRatio`, `guides`, `zoomable`, `crop`, `build`, `built`, `dragMode`, `scaleX`, `scaleY`, `enable`, `zoomTo`, `rotateTo` on <div> tag. 
    Remove these props from the element.
    For details, see https://fb.me/react-unknown-prop
        in div (created by ReactCropper)
    
    opened by HadrienPierart 7
  • Crop zone exceeds natural image size

    Crop zone exceeds natural image size

    The image returned by cropper is much larger than the original image.

    It seems that fengyuanchen cropper had this issue, but it is fixed now. See issue: https://github.com/fengyuanchen/cropper/issues/34

    Can you confirm witch version of fengyuanchen is used by react-cropper?

    Also I still have this problem, so when uploading a 300kb file it become 1.9Mb after cropping; the difference is huge.

    opened by ClaudiuHar 7
  • build(deps-dev): bump @typescript-eslint/eslint-plugin from 5.0.0 to 5.48.0

    build(deps-dev): bump @typescript-eslint/eslint-plugin from 5.0.0 to 5.48.0

    Bumps @typescript-eslint/eslint-plugin from 5.0.0 to 5.48.0.

    Release notes

    Sourced from @​typescript-eslint/eslint-plugin's releases.

    v5.48.0

    5.48.0 (2023-01-02)

    Bug Fixes

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)

    v5.47.1

    5.47.1 (2022-12-26)

    Bug Fixes

    • ast-spec: correct some incorrect ast types (#6257) (0f3f645)
    • eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

    v5.47.0

    5.47.0 (2022-12-19)

    Features

    • eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

    v5.46.1

    5.46.1 (2022-12-12)

    Note: Version bump only for package @​typescript-eslint/typescript-eslint

    v5.46.0

    5.46.0 (2022-12-08)

    Bug Fixes

    • eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

    Features

    • eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

    v5.45.1

    5.45.1 (2022-12-05)

    ... (truncated)

    Changelog

    Sourced from @​typescript-eslint/eslint-plugin's changelog.

    5.48.0 (2023-01-02)

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)

    5.47.1 (2022-12-26)

    Bug Fixes

    • ast-spec: correct some incorrect ast types (#6257) (0f3f645)
    • eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

    5.47.0 (2022-12-19)

    Features

    • eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

    5.46.1 (2022-12-12)

    Note: Version bump only for package @​typescript-eslint/eslint-plugin

    5.46.0 (2022-12-08)

    Bug Fixes

    • eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

    Features

    • eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

    5.45.1 (2022-12-05)

    Bug Fixes

    • eslint-plugin: [keyword-spacing] unexpected space before/after in import type (#6095) (98caa92)
    • eslint-plugin: [no-shadow] add call and method signatures to ignoreFunctionTypeParameterNameValueShadow (#6129) (9d58b6b)
    • eslint-plugin: [prefer-optional-chain] collect MetaProperty type (#6083) (d7114d3)
    • eslint-plugin: [sort-type-constituents, sort-type-union-intersection-members] handle some required parentheses cases in the fixer (#6118) (5d49d5d)

    5.45.0 (2022-11-28)

    Bug Fixes

    • eslint-plugin: [array-type] --fix flag removes parentheses from type (#5997) (42b33af)
    • eslint-plugin: [keyword-spacing] prevent crash on no options (#6073) (1f19998)
    • eslint-plugin: [member-ordering] support private fields (#5859) (f02761a)
    • eslint-plugin: [prefer-readonly] report if a member's property is reassigned (#6043) (6e079eb)

    ... (truncated)

    Commits
    • 4ab9bd7 chore: publish v5.48.0
    • cf3ffdd feat(eslint-plugin): specify which method is unbound and added test case (#6281)
    • 6ffce79 chore: publish v5.47.1
    • 0f3f645 fix(ast-spec): correct some incorrect ast types (#6257)
    • ccd45d4 fix(eslint-plugin): [member-ordering] correctly invert optionalityOrder (#6256)
    • a2c08ba chore: publish v5.47.0
    • 9e35ef9 feat(eslint-plugin): [no-floating-promises] add suggestion fixer to add an 'a...
    • 6b3ed1d docs: fixed typo "foo.property" (#6180)
    • c943b84 chore: publish v5.46.1
    • 47241bb docs: overhaul branding and add new logo (#6147)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • build(deps-dev): bump @typescript-eslint/parser from 5.0.0 to 5.48.0

    build(deps-dev): bump @typescript-eslint/parser from 5.0.0 to 5.48.0

    Bumps @typescript-eslint/parser from 5.0.0 to 5.48.0.

    Release notes

    Sourced from @​typescript-eslint/parser's releases.

    v5.48.0

    5.48.0 (2023-01-02)

    Bug Fixes

    Features

    • eslint-plugin: specify which method is unbound and added test case (#6281) (cf3ffdd)

    v5.47.1

    5.47.1 (2022-12-26)

    Bug Fixes

    • ast-spec: correct some incorrect ast types (#6257) (0f3f645)
    • eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

    v5.47.0

    5.47.0 (2022-12-19)

    Features

    • eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

    v5.46.1

    5.46.1 (2022-12-12)

    Note: Version bump only for package @​typescript-eslint/typescript-eslint

    v5.46.0

    5.46.0 (2022-12-08)

    Bug Fixes

    • eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

    Features

    • eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

    v5.45.1

    5.45.1 (2022-12-05)

    ... (truncated)

    Changelog

    Sourced from @​typescript-eslint/parser's changelog.

    5.48.0 (2023-01-02)

    Note: Version bump only for package @​typescript-eslint/parser

    5.47.1 (2022-12-26)

    Note: Version bump only for package @​typescript-eslint/parser

    5.47.0 (2022-12-19)

    Note: Version bump only for package @​typescript-eslint/parser

    5.46.1 (2022-12-12)

    Note: Version bump only for package @​typescript-eslint/parser

    5.46.0 (2022-12-08)

    Note: Version bump only for package @​typescript-eslint/parser

    5.45.1 (2022-12-05)

    Bug Fixes

    • parser: remove the jsx option requirement for automatic jsx pragma resolution (#6134) (e777f5e)

    5.45.0 (2022-11-28)

    Note: Version bump only for package @​typescript-eslint/parser

    5.44.0 (2022-11-21)

    Note: Version bump only for package @​typescript-eslint/parser

    5.43.0 (2022-11-14)

    Note: Version bump only for package @​typescript-eslint/parser

    5.42.1 (2022-11-07)

    Note: Version bump only for package @​typescript-eslint/parser

    5.42.0 (2022-10-31)

    Features

    Reverts

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • build(deps-dev): bump @rollup/plugin-commonjs from 21.0.0 to 24.0.0

    build(deps-dev): bump @rollup/plugin-commonjs from 21.0.0 to 24.0.0

    Bumps @rollup/plugin-commonjs from 21.0.0 to 24.0.0.

    Changelog

    Sourced from @​rollup/plugin-commonjs's changelog.

    v24.0.0

    2022-12-18

    Breaking Changes

    • fix: check if defaultIsModuleExports is auto for getDefaultExportFromCjs #1358

    v23.0.7

    2022-12-17

    Bugfixes

    • fix: produce code which works when __esModule is already defined #1379

    v23.0.6

    2022-12-17

    Bugfixes

    • fix: update magic-string #1373

    v23.0.5

    2022-12-15

    Bugfixes

    • fix: resolve export exports not found #1363

    v23.0.4

    2022-12-07

    Bugfixes

    v23.0.3

    2022-11-27

    Bugfixes

    • fix: correctly wrap a default class export from cjs module #1350

    v23.0.2

    ... (truncated)

    Commits
    • c4c26a5 chore(release): commonjs v24.0.0
    • 4766d93 fix(commonjs)!: check if defaultIsModuleExports is auto for getDefaultExportF...
    • 2c2fe9b chore(release): commonjs v23.0.7
    • dcb86a9 fix(commonjs): produce code which works when __esModule is already defined (#...
    • 18e6c31 chore(release): commonjs v23.0.6
    • f5aa3c3 fix(commonjs,dynamic-import-vars,inject,replace,strip): update magic-string (...
    • 75e9ff4 chore(release): commonjs v23.0.5
    • 39a39d7 fix(commonjs): resolve export exports not found (#1363)
    • 7b62557 chore(release): commonjs v23.0.4
    • a47c153 fix(commonjs): declaration tag @​default for ignoreTryCatch + fix some typos (...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 0
  • build(deps-dev): bump postcss from 8.3.9 to 8.4.20

    build(deps-dev): bump postcss from 8.3.9 to 8.4.20

    Bumps postcss from 8.3.9 to 8.4.20.

    Release notes

    Sourced from postcss's releases.

    8.4.20

    • Fixed source map generation for childless at-rules like @layer.

    8.4.19

    • Fixed whitespace preserving after AST transformations (by @​romainmenke).

    8.4.18

    • Fixed an error on absolute: true with empty sourceContent (by @​KingSora).

    8.4.17

    8.4.16

    • Fixed Root AST migration.

    8.4.15

    • Fixed AST normalization after using custom parser with old PostCSS AST.

    8.4.14

    • Print “old plugin API” warning only if plugin was used (by @​zardoy).

    8.4.13

    8.4.12

    • Fixed package.funding to have same value between all PostCSS packages.

    8.4.11

    • Fixed Declaration#raws.value type.

    8.4.10

    • Fixed package.funding URL format.

    8.4.9

    8.4.8

    • Fixed end position in empty Custom Properties.

    8.4.7

    • Fixed Node#warn() type (by @​ybiquitous).
    • Fixed comment removal in values after ,.

    8.4.6

    • Prevented comment removing when it change meaning of CSS.
    • Fixed parsing space in last semicolon-less CSS Custom Properties.
    • Fixed comment cleaning in CSS Custom Properties with space.
    • Fixed throwing an error on .root access for plugin-less case.

    ... (truncated)

    Changelog

    Sourced from postcss's changelog.

    8.4.20

    • Fixed source map generation for childless at-rules like @layer.

    8.4.19

    • Fixed whitespace preserving after AST transformations (by Romain Menke).

    8.4.18

    • Fixed an error on absolute: true with empty sourceContent (by Rene Haas).

    8.4.17

    • Fixed Node.before() unexpected behavior (by Romain Menke).
    • Added TOC to docs (by Mikhail Dedov).

    8.4.16

    • Fixed Root AST migration.

    8.4.15

    • Fixed AST normalization after using custom parser with old PostCSS AST.

    8.4.14

    • Print “old plugin API” warning only if plugin was used (by @​zardoy).

    8.4.13

    • Fixed append() error after using .parent (by Jordan Pittman).

    8.4.12

    • Fixed package.funding to have same value between all PostCSS packages.

    8.4.11

    • Fixed Declaration#raws.value type.

    8.4.10

    • Fixed package.funding URL format.

    8.4.9

    • Fixed package.funding (by Álvaro Mondéjar).

    8.4.8

    • Fixed end position in empty Custom Properties.

    8.4.7

    • Fixed Node#warn() type (by Masafumi Koba).
    • Fixed comment removal in values after ,.

    8.4.6

    • Prevented comment removing when it change meaning of CSS.
    • Fixed parsing space in last semicolon-less CSS Custom Properties.
    • Fixed comment cleaning in CSS Custom Properties with space.
    • Fixed throwing an error on .root access for plugin-less case.

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    dependencies 
    opened by dependabot[bot] 2
  • build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    build(deps): bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 2
  • build(deps): bump loader-utils from 1.4.0 to 1.4.2

    build(deps): bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    dependencies 
    opened by dependabot[bot] 2
Releases(v2.2.0-0)
  • v2.2.0-0(Oct 16, 2021)

    What's Changed

    • feat: on image load event by @shekhar-shubhendu in https://github.com/react-cropper/react-cropper/pull/739

    Full Changelog: https://github.com/react-cropper/react-cropper/compare/v2.1.8...v2.2.0-0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.8(Jun 28, 2021)

    • fix: update zoomTo handling (#562) (thanks @rizvanua)
    • fix: bug with exif rotation (#579) (thanks @amitava82)
    • update cropperjs

    https://github.com/react-cropper/react-cropper/compare/v2.1.7...v2.1.8

    Source code(tar.gz)
    Source code(zip)
  • v2.1.8-1(May 24, 2021)

  • v2.1.8-0(Apr 26, 2021)

  • v2.1.7(Feb 20, 2021)

  • v2.1.6(Feb 16, 2021)

    What's new

    • Removes internal state where cropper was set and use ref to get cropper (for less re-render)
    • Introduces ReactCropperElement which extends HTMLImageElement to add missing cropper field
    • Upgrades cropperjs to v1.5.10

    https://github.com/react-cropper/react-cropper/compare/v2.1.5...v2.1.6

    Source code(tar.gz)
    Source code(zip)
  • v2.1.6-0(Feb 12, 2021)

    What's new

    • Removes internal state where cropper was set and use ref to get cropper (for less re-render)
    • Introduces ReactCropperElement which extends HTMLImageElement to add missing cropper field
    • Upgrades cropperjs to v1.5.10

    https://github.com/react-cropper/react-cropper/compare/v2.1.5-0...v2.1.6-0

    Source code(tar.gz)
    Source code(zip)
  • v2.1.5(Feb 8, 2021)

    • Maintainance release
    • Update peer dependency react to allow react:17

    https://github.com/react-cropper/react-cropper/compare/v2.1.4...v2.1.5

    Source code(tar.gz)
    Source code(zip)
  • v2.1.4(Sep 14, 2020)

  • v2.1.3(Sep 7, 2020)

    • feat(cropperjs): use v1.5.8 (#316) ad7d35e
    • build(deps): bump cropperjs from 1.5.7 to 1.5.8 (#315) 139d527

    https://github.com/react-cropper/react-cropper/compare/v2.1.2...v2.1.3

    Source code(tar.gz)
    Source code(zip)
  • v2.1.2(Sep 3, 2020)

  • v2.1.1(Aug 31, 2020)

    • fix: update conditions and tests (#283) 58c2cea
    • Update README.md f7e786f
    • fix(ref): allow render without ref too (#269) 3328475
    • fix: Ensure the image can fit inside the canvas by default (#268) 9540640

    https://github.com/react-cropper/react-cropper/compare/v2.1.0...v2.1.1

    Source code(tar.gz)
    Source code(zip)
  • v2.1.1-0(Aug 22, 2020)

  • v2.1.0(Aug 20, 2020)

  • v2.0.0(Aug 15, 2020)

    Breaking Change (version >= 2.0.0)

    1. Support for ref has been removed. Use the onInitialized method to get the cropper instance.
    2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
    3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
    4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
    5. React Cropper does not depend on @types/react-cropper and provides its own types. Please uninstall/remove @types/react-cropper as they might 'cause issues.

    https://github.com/react-cropper/react-cropper/compare/1.3.0...v2.0.0

    Source code(tar.gz)
    Source code(zip)
  • 2.0.0-0(Jul 11, 2020)

    Changelog:

    • Typescript Rewrite
    • cropperjs bumped to v1.5.7

    Breaking Change (version >= 2.0.0)

    1. Support for ref has been removed. Use the onInitialized method to get the cropper instance.
    2. To set initial aspect ratio, instead of using aspectRatio use initialAspectRatio.
    3. Props data, canvasData and cropBoxData are directly passed on to cropperjs and their respective setters are not called as earlier.
    4. React Cropper now does not try to use/execute moveTo as earlier. Directly use the moveTo method from the cropper instance.
    Source code(tar.gz)
    Source code(zip)
dynamic-component-app is an angular application for dynamic component template creation

MyApp This project was generated with Angular CLI version 14.1.0. Development server Run ng serve for a dev server. Navigate to http://localhost:4200/

Aniket Muruskar 7 Aug 26, 2022
Animated Select Component (React)

Spring Chain We built a custom select component with a menu with animations and beautiful gradients and a glassy style, is called "Spring Chain" becau

Cecilia Benitez 7 Feb 6, 2022
❤️ A heart-shaped toggle switch component for React.

heart-switch A heart-shaped toggle switch component for React. Inspired by Tore Bernhoft's I heart toggle Dribbble shot. ?? Table of Contents ?? Getti

Anatoliy Gatt 413 Dec 15, 2022
🔍 A view component for React Native with pinch to zoom and drag to pan functionality.

react-native-pan-pinch-view A view component for React Native with pinch to zoom and drag to pan functionality. ?? Introduction Even though the demo s

Ivanka Todorova 43 Oct 6, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
🔖 lightweight, efficient Tags input component in Vanilla JS / React / Angular / Vue

Tagify - tags input component Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and

Yair Even Or 2.8k Jan 2, 2023
A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase

A quick start Create React App template with react-router-dom, material-ui, gh-pages and firebase. With google authentication, routing and deployment capabilities built in.

Hussain Pettiwala 5 Feb 22, 2022
(🔗, 🌲) Web3 Link Tree is a free & open-source alternative to Linktree built with React.js, Next.js, Tailwind and Web3-React

Getting Started Read the detailed guide here Customize Add your name, wallet address, social media links and more in config.ts Images Save images to t

Naut 35 Sep 20, 2022
📦 An aframe component for displaying live stock tickers.

aframe-stock-ticker An aframe component for displaying live stock tickers. Also works with cryptocurrency and forex. Usage crypto-chart To create a cr

Mitarai 7 Jun 26, 2022
📝 A multiselect component in Pure JS - Compatible with IE11

Iconic Multiselect A multiselect component written in pure JavaScript - Also compatible with IE11 Default template: Custom template: ?? Try live demo

Sidney Wimart 8 Aug 31, 2022
A vanilla JavaScript multi-checkbox dropdown web component.

Multi-Checkbox Web Component Multi-Checkbox is a web component that utilizes multiple checkboxes in a dropdown list to populate the value of an input.

null 2 Dec 24, 2021
Simple yet flexible charting Lightning Web Component using Chart.js for admins & developers

Lightning Web Chart.js Component Simple yet flexible charting Lightning Web Component using Chart.js for admins & developers Documentation Getting sta

@SalesforceLabs 109 Dec 9, 2022
The open source embeddable online markdown editor (component).

Editor.md Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked. Features Support Standard

pandao 12.7k Dec 30, 2022
A fast, portable, flexible JavaScript component framework

SAN 一个快速、轻量、灵活的 JavaScript 组件框架 A fast, portable, flexible JavaScript component framework. HomePage 网站 安装(Install) NPM: $ npm i san CDN: <script src=

Baidu 4.6k Dec 29, 2022
Component oriented framework with Virtual dom (fast, stable, with tooling)

Bobril Main site bobril.com Changelog of npm version: https://github.com/Bobris/Bobril/blob/master/CHANGELOG.md Component oriented framework inspired

Boris Letocha 359 Dec 4, 2022
Context-Full Web Component Library

CWCO Contextfull Web Component Library created to improve native Web Component APIs user experience with: ✅ No Build Required! ✅ Works with other libr

Before Semicolon 51 Jan 2, 2023
The 2Kb smallest Chat component.

tidi Meet tidi, the 2kb bubble chat component for any website... made using preact, running with a 4MB compiled backend service. FrontEnd Backend Disc

darker 72 Dec 11, 2022
A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

A health-focused app for users to be able to track workouts and nutritional data with a social media component to inspire friendly competition among the users.

Jon Jackson 3 Aug 26, 2022
Hands Off Ukraine Web Component

A banner web component that enables companies/individuals to quickly show their support for Ukraine regarding the recent Russian invasion. It hopes to raise awareness to the incident and allow users to quickly access support websites & donate.

Filipe Freire 8 Mar 15, 2022