react-crouton - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "react-crouton",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "A message component for reactjs.",
@@ -15,7 +15,7 @@ "main": "index.js",
   ],
-   "repository": {
+  "repository": {
     "type": "git",
     "url": "[e-mail]:xeodou/react-crouton.git"
   },
-   "browserify": {
+  "browserify": {
     "transform": [
@@ -30,4 +30,14 @@ [
   "devDependencies": {
-    "react": "^0.11.1"
+    "codemirror": "^4.6.0",
+    "eggshell": "^0.1.20",
+    "gulp": "^3.8.8",
+    "gulp-browserify": "^0.5.0",
+    "gulp-gh-pages": "^0.3.4",
+    "gulp-load-plugins": "^0.6.0",
+    "gulp-rimraf": "^0.1.0",
+    "gulp-sass": "^0.7.3",
+    "gulp-size": "^1.1.0",
+    "react": "^0.11.2",
+    "reactify": "^0.14.0"
   }
 }

README.md

@@ -5,3 +5,3 @@ # React-Crouton
 
-live demo coming soon
+[live dome](http://xeodou.github.io/react-crouton)
 
@@ -21,15 +21,88 @@ ## Getting Started
 
+var data = {
+    id: Date.now(),
+    type: 'error',
+    message: 'Hello React-Crouton',
+    autoMiss: true || false,
+    onDismiss: listener,
+    buttons: [{
+        name: 'close',
+        listener: function() {
+
+        }
+    }],
+    hidden: false,
+    timeout: 2000
+}
+
 <Crouton
-    buttons={this.state.crouton.buttons}
-    onDismiss={this.state.crouton.onDismiss}
-    hidden={this.state.crouton.hidden}
-    timeout={this.state.crouton.timeout}
-    autoMiss={this.state.crouton.autoMiss}
-    message={this.state.crouton.message}
-    type={this.state.crouton.type} />
+    id={data.id}
+    type={data.type}
+    message={data.message}
+    onDismiss={data.onDismiss}
+    buttons={data.buttons}
+    hidden={data.hidden}
+    timeout={data.timeout}
+    autoMiss={data.autoMiss}/>
 
 ```
 
+## Options
+
+**id** required, every message need an unique id.
+
+type: `number`
+
+**message** required, the message what you want show.
+
+type: `string` || `array`
+
+example:
+
+```
+message: 'Hello React-Crouton'
+message: ['Hello', 'React', '-', 'Crouton']
+```
+
+**type** required, define what type message you want to define.
+
+type: `string`
+
+**hidden** optional, control this property to show or hidden crouton.
+
+type: `boolean`, default is `false`
+
+**buttons** optional, define the buttons that you want show to the user.
+
+type: `string` || `array`
+
+example:
+
+```
+buttons: 'close'
+butons: [{
+    name: 'close'
+}]
+butons: [{
+    name: 'close',
+    listener: function() {
+        console.log('close button clicked.')
+    }
+}]
+```
+
+**autoMiss** optional, crouton will auto missed if set this propterty.
+
+type: `boolean`
+
+**timeout** optional, set how long (ms) to auto dismiss the crouton.
+
+type: `number`, default is `2000` ms (2 seconds)
+
+**onDismiss** optional, crouton will invoke this listener when it dismissed.
+
+type: `function`
+
 ## License
 
 MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15185

increased by220.02%

Number of package files

8

increased by100%

Lines of code

357

increased by181.1%

Number of lines in readme file

107

increased by214.71%

Worsened metrics

Dev dependency count

11

increased by1000%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes