react-day-picker - npm Package Compare versions

Comparing version 0.3.3 to 0.3.4

example/webpack.config.js

 module.exports = {
-  entry: './src/main.jsx',
+  entry: './src/jsx/main.jsx',
 
@@ -15,2 +15,4 @@ output: {
       { test: /\.jsx?$/, exclude: /node_modules/, loaders: ['6to5-loader'] },
+      { test: /\.scss?$/, loaders: ['style', 'css', 'autoprefixer-loader?browsers=last 2 version', 'sass-loader'] },
+      { test: /\.svg$/, loader: "url-loader?limit=100000&mimetype=image/svg+xml" }
     ]
@@ -17,0 +19,0 @@ },

package.json

 {
   "name": "react-day-picker",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Minimalistic date picker component for React and momentjs.",
@@ -8,2 +8,3 @@ "main": "./dist/DayPicker.js",
     "test": "jest",
+    "build": "cd example && webpack --hot=false --devtool=false --optimize-minimize",
     "prepublish": "6to5 ./src -d ./dist",
@@ -38,4 +39,9 @@ "example": "cd example && webpack-dev-server --colors --progress --display-error-details"
     "6to5-loader": "^1.0.0",
+    "autoprefixer-loader": "^1.0.0",
+    "css-loader": "^0.9.0",
     "jest-cli": "^0.2.1",
     "react-tap-event-plugin": "^0.1.3",
+    "sass-loader": "^0.3.1",
+    "style-loader": "^0.8.2",
+    "url-loader": "^0.5.5",
     "webpack": "^1.4.15",
@@ -42,0 +48,0 @@ "webpack-dev-server": "^1.7.0"

README.md

 # react-day-picker
 
-A minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). 
+Minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). 
 
-See [demo](http://www.gpbl.org/react-day-picker/).
 
 ```bash
-npm install 'react-day-picker' --save
+npm install react-day-picker --save
 ```
 
-### Modifiers instead of selected days
+See a [live version](http://www.gpbl.org/react-day-picker/) of the [example app](example), where the the component works together with an `<input>` field. There, the past days are shown as "disabled" and cannot be selected.
 
-This date picker does not have the concept of a *selected date*: instead, you specify *day modifiers*, i.e. strings that classify the aspect and the behaviour for each day in the calendar. 
+## Modifiers instead of selected days
 
-A modifier is appended to the day cell's CSS class – for example, a `disabled` modifier could make it appearing as disabled, or a `selected` modifier could highlight a range of selected days.
+This date picker does not have the concept of a *selected date*: instead, you specify custom *day modifiers*. A modifier is a string that classify the aspect (and eventually the behaviour) for each day appearing in the calendar. 
 
-See a [live version](http://www.gpbl.org/react-day-picker/) of the [example app](example), where the the component works together with an `<input>` field. There, the past days are marked as disabled and are not selectable, and the current day is made red.
+By evaluating a `function(day)` you provide, a modifier is appended for each day to the `daypicker__day` class, using a [BEM-like syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). 
 
+For example, a `disabled` modifier (`daypicker__day--disabled`) may make it appearing as grayed-out, or a `selected` (`daypicker__day--selected`) modifier could highlight a range of selected days. 
+
+### Selecting a day 
+
+You are expected to use the `state` of your component: set its state listening to the `onTouchTap/onClick` DayPicker events (see API and example below).
+
+## Styling
+
+You need to setup your own CSS. You can start from [this css](example/src/scss/daypicker.scss) as example.
+
 ## Usage example
 
-The following component saves the selected day in its state. It also adds the `daypicker__day--today` CSS modifier to the day cell corresponding to the current day, and the 
-`daypicker__day--selected` CSS modifier to the cell corresponding to the selected day.
+The following component implements the DayPicker and saves the selected day in its own `state`. 
 
+It also adds the `daypicker__day--today` CSS modifier for today, and a `daypicker__day--selected` CSS modifier to the cell corresponding to the selected day.
+
 ```js
@@ -73,6 +83,2 @@
 
-## Styling
-
-You need to setup your own CSS. See [this css](example/main.css) as example: the daypicker selectors begins with `.daypicker`.
-
 ## API
@@ -84,3 +90,3 @@
 
-#### enableOutsideDay `bool`
+#### enableOutsideDays `bool`
 
@@ -91,4 +97,4 @@ Show the days outside the shown month.
 
-* The object's keys are the modifier's name – applied to each day following a BEM-like syntax: `daypicker__day--<modifier>`
-* The key's values are functions evaluated for each day. When they returns `true`, the modifier is added and eventually passed to the `onDayTouchTap` payload.
+* The object's keys are the modifier's name – applied to each day, following a BEM-like syntax: `daypicker__day--<modifier>`
+* The key's values are functions evaluated for each day. When they returns `true`, the modifier is applied, and eventually passed to the `onDayTouchTap` payload.
 
@@ -98,2 +104,3 @@ For example, the following modifiers will add the CSS class `daypicker__day--disabled` to the days of the past:
 ```js
+
 modifiers = {
@@ -104,2 +111,4 @@ disabled: function (day) {
 }
+<DayPicker modifiers={modifiers} />
+
 ```
@@ -119,8 +128,5 @@
 #### onDayMouseEnter `function(day, modifiers, event)`
-
-Use this attribute to add an handler when the mouse enters a day element. 
-
 #### onDayMouseLeave `function(day, modifiers, event)`
 
-Use this attribute to add an handler when the mouse leaves a day element. 
+Use this attribute to add an handler when the mouse enters/leaves a day element. 
 
@@ -127,0 +133,0 @@ #### onPrevMonthTouchTap `function(month)`

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Number of lines in readme file

130

increased by4.84%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

408174

decreased by-82.13%

Dev dependency count

12

increased by71.43%

Lines of code

1743

decreased by-93.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes