Adds examples to the resource page

README.md

@@ -5,7 +5,7 @@
 
 A date and time picker in the same React.js component. It can be used as a datepicker, timepicker or both at the same time. It is **highly customizable** and it even allows to edit date's milliseconds.
 
-> **Back to the roots!** Thanks to the people of [YouCanBook.me (best scheduling tool)](https://youcanbook.me) for sponsoring react-datetime for so long. Now the project returns to the community and we are **looking for collaborators** to continue improving react-datetime. [Would you like to give a hand?](contribute-home.md)
+> **Back to the roots!** Thanks to the people of [YouCanBook.me (best scheduling tool)](https://youcanbook.me) for sponsoring react-datetime for so long. Now the project returns to the community and we are **looking for contributors** to continue improving react-datetime. [Would you like to give a hand?](contribute-home.md)
 
 These are the docs for version 3 of the library. If you are still using the deprecated v2, [here it is its documentation](https://github.com/arqex/react-datetime/blob/2a83208452ac5e41c43fea31ef47c65efba0bb56/README.md), but we strongly recommend to migrate to version 3 in order to keep receiving updates. Please check [migrating react-datetime to version 3](migrateToV3.md) to safely update your app.
 
@@ -25,20 +25,21 @@ yarn add react-datetime
 
 [React.js](http://facebook.github.io/react/) and [Moment.js](http://momentjs.com/) are peer dependencies for react-datetime (as well as [Moment.js timezones](https://momentjs.com/timezone/) if you want to use the `displayTimeZone` prop). These dependencies are not installed along with react-datetime automatically, but your project needs to have them installed in order to make the datepicker work. You can then use the datepicker like in the example below.
 
-
 ```js
+// Import the library
 import Datetime from 'react-datetime';
 
-...
-
-render: function() {
-    return <Datetime />;
-}
+// return it from your components
+return <Datetime />;
 ```
 [See this example working](https://codesandbox.io/s/boring-dew-uzln3).
 
+Do you want more examples? [Have a look at our resources gallery](resources.md).
+
 **Don't forget to add the [CSS stylesheet](https://github.com/arqex/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.**
 
+
+
 ## API
 
 Below we have all the props that we can use with the `<DateTime>` component. There are also some methods that can be used imperatively.
@@ -225,15 +226,15 @@ class MyDTPicker extends React.Component {
     this.refs.datetime.navigate("days");
   }
 }
-[See it working](https://codesandbox.io/s/frosty-fog-nrwk2)
 ```
+[See it working](https://codesandbox.io/s/frosty-fog-nrwk2)
 
 #### Method Parameters
 * `props` is the object that the datepicker has calculated for this object. It is convenient to use this object as the `props` for your custom component, since it knows how to handle the click event and its `className` attribute is used by the default styles.
 * `selectedDate` and `currentDate` are [moment objects](http://momentjs.com) and can be used to change the output depending on the selected date, or the date for the current day.
 * `month` and `year` are the numeric representation of the current month and year to be displayed. Notice that the possible `month` values range from `0` to `11`.
 
-## Specify Available Units
+## Make it work as a year picker or a time picker
 You can filter out what you want the user to be able to pick by using `dateFormat` and `timeFormat`, e.g. to create a timepicker, yearpicker etc.
 
 In this example the component is being used as a *timepicker* and can *only be used for selecting a time*.
@@ -248,7 +249,7 @@ In this example you can *only select a year and month*.
 ```
 [Working example of only selecting year and month here.](https://codesandbox.io/s/recursing-pascal-xl643)
 
-## Selectable Dates
+## Blocking some dates to be selected
 It is possible to disable dates in the calendar if the user are not allowed to select them, e.g. dates in the past. This is done using the prop `isValidDate`, which admits a function in the form `function(currentDate, selectedDate)` where both arguments are [moment objects](http://momentjs.com). The function shall return `true` for selectable dates, and `false` for disabled ones.
 
 In the example below are *all dates before today* disabled.

contribute-home.md

@@ -2,15 +2,15 @@
 
 Hey!! So good you are interested in collaborate with react-datetime, I'm pretty sure you can make the difference here!
 
-react-datetime is a nice choice if you are looking for some open-source project to lay your hands on. It's a library used by thousands of developers, and the changes in the last version make easier for everyone to understand it. It's not simple, but it's small enough to be get you initiated in a couple of hours.
+react-datetime is a nice choice if you are looking for some open-source project to lay your hands on. It's a library **used by thousands of developers**, and the changes in the last version make easier for everyone to understand it. It's not simple, but it's small enough to be get you initiated in a couple of hours.
 
 ## Do you want to be part of the future of react-datetime?
 We've just released the version 3 of the library and we are already planning the version 4, why don't you join the conversation and help defining the roadmap:
 
 * [Defining version 4 of react-datetime](https://github.com/arqex/react-datetime/issues/723)
 
 ## Do you want to play with the source code?
-Best way of understand anything is by doing it! This repository includes a playground to let you make changes to the library in minutes. Clone the repo and fire up the playground:
+Best way of understand anything is by experiencing it! This repository includes a playground to let you make changes to the library in minutes. Clone the repo and fire up the playground:
 
 ```sh
 git clone https://github.com/arqex/react-datetime.git

migrateToV3.md

@@ -55,20 +55,6 @@ Version 3 is a big refactor of react-datetime. We have tried to not to change th
 * Updated most of the dependencies.
 
 ## Contribute
+react-datetime is made by the community for the community. People like you, interested in contribute, are the key of the project! 🙌🙌🙌
 
-react-datetime is a nice choice if you are looking for some open-source project to lay your hands on. It's a library used by thousands of developers, and the changes in this version make easier for everyone to understand it. It's not simple, but it's small enough to be get you initiated in a couple of hours.
-
-If you are interested and want to start playing with its code, clone it and fire up the playground included in the repo:
-
-```
-git clone https://github.com/arqex/react-datetime.git
-cd react-datetime
-npm install
-npm run playground
-```
-
-This will start a local development server building `src/index.js`. We can update react-datetime's sources then and our changes will be hot loaded by the development server.
-
-Looking for something to work on? Have a look at [the list of known issues](https://github.com/arqex/react-datetime/issues), and maybe you can kill a bug making somebody happy! :)
-
-Have some work done? That's great! But please, read the [react-datetime contributing guidelines](.github/CONTRIBUTING.md) before submitting it.
+Have a look at [our contribute page](contribute-home.md) to know how to get started.

resources.md

@@ -4,4 +4,18 @@ Here a list of handy resouces that will help you getting started to use react-da
 
 If you have written a nice article about react-datetime feel free to make a pull request to add it to the list!
 
-* [An editable code sandbox example to check how it works](https://codesandbox.io/s/boring-dew-uzln3).
+### Articles
+We don't have any articles yet. Yours can be the first! Create a PR to update this page.
+
+### Examples
+* [An basic code sandbox example to check how it works](https://codesandbox.io/s/boring-dew-uzln3).
+* [i18n - datepicker in other languages](https://codesandbox.io/s/interesting-kare-0707b)
+* [Passing props to the input](https://codesandbox.io/s/interesting-kare-0707b)
+* [Using a custom input element](https://codesandbox.io/s/peaceful-water-3gb5m)
+* [Datepicker without an input](https://codesandbox.io/s/busy-vaughan-wh773)
+* [Using custom elements for the year/month/day views](https://codesandbox.io/s/busy-vaughan-wh773)
+* [Override the datepicker views completely](https://codesandbox.io/s/frosty-fog-nrwk2)
+* [Timepicker only](https://codesandbox.io/s/loving-nobel-sbok2)
+* [Year and month picker only](https://codesandbox.io/s/recursing-pascal-xl643)
+* [Blocking dates in the past](https://codesandbox.io/s/thirsty-shape-l4qg4)
+* [Blocking selection of weekends](https://codesandbox.io/s/laughing-keller-3wq1g)