react-html5-camera-photo - npm Package Compare versions

Comparing version 1.5.3 to 1.5.4

CHANGELOG.md

 # Change Log
 
+### Other
+#### 1.5.4
+- update doc
+
 ### Refactor
@@ -4,0 +8,0 @@ #### 1.5.3

package.json

 {
   "name": "react-html5-camera-photo",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "React.js HTML5 Camera Photo",
@@ -5,0 +5,0 @@ "main": "build/index.js",

README.md

@@ -38,24 +38,19 @@ # react-html5-camera-photo
 
-
 **Minimum ES6 example**
 ```js
-import React, { Component } from 'react';
+import React from 'react';
 import Camera from 'react-html5-camera-photo';
 import 'react-html5-camera-photo/build/css/index.css';
 
-class App extends Component {
-  onTakePhoto (dataUri) {
-    // Do stuff with the dataUri photo...
+function App (props) {
+  function handleTakePhoto (dataUri) {
+    // Do stuff with the photo...
     console.log('takePhoto');
   }
 
-  render () {
-    return (
-      <div className="App">
-        <Camera
-          onTakePhoto = { (dataUri) => { this.onTakePhoto(dataUri); } }
-        />
-      </div>
-    );
-  }
+  return (
+    <Camera
+      onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } }
+    />
+  );
 }
@@ -69,19 +64,19 @@
 ### PropTypes
-Properties | Type | Description
---- | --- | ---
-**onCameraStart():** (optional) | Event | Callback called when the camera is started.
-**onCameraStop():** (optional) | Event | Callback called when the camera is stopped.
-**onCameraError(error):** (Optional) | Event | Callback called with the error object as parameter when error occur while opening the camera. Often the permission.
-**onTakePhoto(dataUri):** (Optional) | Event | The function called when a photo is taken. the dataUri is passed as a parameter.
-**onTakePhotoAnimationDone(dataUri):** (Optional) | Event | The function called when a photo is taken and the animation is done. the dataUri is passed as a parameter.
-**idealFacingMode:** (Optional) (Dynamic) | String | The ideal facing mode of the camera, `environment` or `user`, the default is the default of the browser. Use `FACING_MODES` constant to get the right string. Example :. FACING_MODES.ENVIRONMENT or FACING_MODES.USER
-**idealResolution:** (Optional) (Dynamic) | Object | Object of the ideal resolution of the camera, `{width: Integer, height: Integer}`, the default is the default of the browser.
-**isMaxResolution:** (Optional) (Dynamic) | Boolean | If is true, the camera will start with his own maximum resolution, the default is false.
-**isImageMirror:** (Optional) | Boolean | If is true, the camera image will be mirror, the default is true.
-**isSilentMode:**(Optional) | Boolean | If is true, the camera do not play click sound when the photo was taken, the default is false.
-**isFullscreen:** (Optional) | Boolean | If is true, the camera image will be set fullscreen to force the maximum width and height of the viewport, the default is false.
-**isDisplayStartCameraError:** (Optional) | Boolean | If is true, if the camera start with error, it will show the error between **h1** tag on the top of the component. Useful to notify the user about permission error, the default is true.
-**sizeFactor:** (Optional) | Number | Number of the factor resolution. Example, a sizeFactor of `1` get the same resolution of the camera while sizeFactor of `0.5` get the half resolution of the camera. The sizeFactor can be between range of `]0, 1]` and the default value is `1`.
-**imageType:**: (Optional) | String | String used to get the desired image type between `jpg` or `png`. to specify the imageType use the constant IMAGE_TYPES, for example to specify jpg format use IMAGE_TYPES.JPG. The default imageType is `png`. Use `IMAGE_TYPES` constant to get the right image type Example:. IMAGE_TYPES.JPG or IMAGE_TYPES.PNG
-**imageCompression:**: (Optional) | Number | Number used to get the desired compression when `jpg` is selected. choose a compression between `[0, 1]`, 1 is maximum, 0 is minimum. The default value imageCompression is `0.92`.
+Properties | Type | Default | Description
+--- | --- | --- | ---
+**onCameraStart():** (optional) | Event || Callback called when the camera is started.
+**onCameraStop():** (optional) | Event || Callback called when the camera is stopped.
+**onCameraError(error):** (Optional) | Event || Callback called with the error object as parameter when error occur while opening the camera. Often the permission.
+**onTakePhoto(dataUri):** (Optional) | Event || The function called when a photo is taken. the dataUri is passed as a parameter.
+**onTakePhotoAnimationDone(dataUri):** (Optional) | Event || The function called when a photo is taken and the animation is done. the dataUri is passed as a parameter.
+**idealFacingMode:** (Optional) (Dynamic) | String | Browser default | The ideal facing mode of the camera, `environment` or `user`. Use `FACING_MODES` constant to get the right string. Example :. FACING_MODES.ENVIRONMENT or FACING_MODES.USER
+**idealResolution:** (Optional) (Dynamic) | Object | Browser default | Object of the ideal resolution of the camera, `{width: Integer, height: Integer}`.
+**isMaxResolution:** (Optional) (Dynamic) | Boolean | false | If is true, the camera will start with his own maximum resolution.
+**isImageMirror:** (Optional) | Boolean | true | If is true, the camera image will be mirror.
+**isSilentMode:**(Optional) | Boolean | false | If is true, the camera do not play click sound when the photo was taken.
+**isFullscreen:** (Optional) | Boolean | false | If is true, the camera image will be set fullscreen to force the maximum width and height of the viewport.
+**isDisplayStartCameraError:** (Optional) | Boolean | true | If is true, if the camera start with error, it will show the error between **h1** tag on the top of the component. Useful to notify the user about permission error.
+**sizeFactor:** (Optional) | Number | 1 | Number of the factor resolution. Example, a sizeFactor of `1` get the same resolution of the camera while sizeFactor of `0.5` get the half resolution of the camera. The sizeFactor can be between range of `]0, 1]`.
+**imageType:**: (Optional) | String | png | String used to get the desired image type between `jpg` or `png`. to specify the imageType use the constant IMAGE_TYPES, for example to specify jpg format use IMAGE_TYPES.JPG. Use `IMAGE_TYPES` constant to get the right image type Example:. IMAGE_TYPES.JPG or IMAGE_TYPES.PNG
+**imageCompression:**: (Optional) | Number | 0.92 | Number used to get the desired compression when `jpg` is selected. choose a compression between `[0, 1]`, 1 is maximum, 0 is minimum.
 
@@ -95,3 +90,3 @@
 ```js
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import Camera from 'react-html5-camera-photo';
@@ -102,25 +97,24 @@ import 'react-html5-camera-photo/build/css/index.css';
 
-class App extends Component {
-  constructor (props, context) {
-    super(props, context);
-    this.state = { dataUri: null };
-    this.onTakePhotoAnimationDone = this.onTakePhotoAnimationDone.bind(this);
-  }
+function App (props) {
+  const [dataUri, setDataUri] = useState('');
 
-  onTakePhotoAnimationDone (dataUri) {
+  function handleTakePhotoAnimationDone (dataUri) {
     console.log('takePhoto');
-    this.setState({ dataUri });
+    setDataUri(dataUri);
   }
 
-  render () {
-    return (
-      <div className="App">
-        {
-          (this.state.dataUri)
-            ? <ImagePreview dataUri={this.state.dataUri} />
-            : <Camera onTakePhotoAnimationDone = {this.onTakePhotoAnimationDone} />
-        }
-      </div>
-    );
-  }
+  const isFullscreen = false;
+  return (
+    <div>
+      {
+        (dataUri)
+          ? <ImagePreview dataUri={dataUri}
+            isFullscreen={isFullscreen}
+          />
+          : <Camera onTakePhotoAnimationDone = {handleTakePhotoAnimationDone}
+            isFullscreen={isFullscreen}
+          />
+      }
+    </div>
+  );
 }
@@ -133,8 +127,8 @@
 ```js
-import React, { Component } from 'react';
+import React from 'react';
 import Camera, { FACING_MODES, IMAGE_TYPES } from 'react-html5-camera-photo';
 import 'react-html5-camera-photo/build/css/index.css';
 
-class App extends Component {
-  onTakePhoto (dataUri) {
+function App (props) {
+  function handleTakePhoto (dataUri) {
     // Do stuff with the photo...
@@ -144,3 +138,3 @@ console.log('takePhoto');
 
-  onTakePhotoAnimationDone (dataUri) {
+  function handleTakePhotoAnimationDone (dataUri) {
     // Do stuff with the photo...
@@ -150,37 +144,33 @@ console.log('takePhoto');
 
-  onCameraError (error) {
-    console.error('onCameraError', error);
+  function handleCameraError (error) {
+    console.log('handleCameraError', error);
   }
 
-  onCameraStart (stream) {
-    console.log('onCameraStart');
+  function handleCameraStart (stream) {
+    console.log('handleCameraStart');
   }
 
-  onCameraStop () {
-    console.log('onCameraStop');
+  function handleCameraStop () {
+    console.log('handleCameraStop');
   }
 
-  render () {
-    return (
-      <div className="App">
-        <Camera
-          onTakePhoto = { (dataUri) => { this.onTakePhoto(dataUri); } }
-          onTakePhotoAnimationDone = { (dataUri) => { this.onTakePhotoAnimationDone(dataUri); } }
-          onCameraError = { (error) => { this.onCameraError(error); } }
-          idealFacingMode = {FACING_MODES.ENVIRONMENT}
-          idealResolution = {{width: 640, height: 480}}
-          imageType = {IMAGE_TYPES.JPG}
-          imageCompression = {0.97}
-          isMaxResolution = {false}
-          isImageMirror = {false}
-          isSilentMode = {true}
-          isDisplayStartCameraError = {true}
-          isFullscreen = {true}
-          sizeFactor = {1}
-          onCameraStart = { (stream) => { this.onCameraStart(stream); } }
-          onCameraStop = { () => { this.onCameraStop(); } }
-        />
-      </div>
-    );
-  }
+  return (
+    <Camera
+      onTakePhoto = { (dataUri) => { handleTakePhoto(dataUri); } }
+      onTakePhotoAnimationDone = { (dataUri) => { handleTakePhotoAnimationDone(dataUri); } }
+      onCameraError = { (error) => { handleCameraError(error); } }
+      idealFacingMode = {FACING_MODES.ENVIRONMENT}
+      idealResolution = {{width: 640, height: 480}}
+      imageType = {IMAGE_TYPES.JPG}
+      imageCompression = {0.97}
+      isMaxResolution = {true}
+      isImageMirror = {false}
+      isSilentMode = {false}
+      isDisplayStartCameraError = {true}
+      isFullscreen = {false}
+      sizeFactor = {1}
+      onCameraStart = { (stream) => { handleCameraStart(stream); } }
+      onCameraStop = { () => { handleCameraStop(); } }
+    />
+  );
 }
@@ -187,0 +177,0 @@

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

233433

decreased by-0.17%

Number of lines in readme file

180

decreased by-5.26%

No dependency changes