Add an example of using locales without a global variable

docs-site/src/example_components.jsx

@@ -10,6 +10,7 @@ import CustomDayClassNames from "./examples/custom_day_class_names";
 import PlaceholderText from "./examples/placeholder_text";
 import SpecificDateRange from "./examples/specific_date_range";
 import Locale from "./examples/locale";
+import LocaleWithoutGlobalVariable from "./examples/locale_without_global_variable";
 import ExcludeDates from "./examples/exclude_dates";
 import HighlightDates from "./examples/highlight_dates";
 import HighlightDatesRanges from "./examples/highlight_dates_with_ranges";
@@ -125,6 +126,10 @@ export default class exampleComponents extends React.Component {
       title: "Locale",
       component: <Locale />
     },
+    {
+      title: "Locale without global variables",
+      component: <LocaleWithoutGlobalVariable />
+    },
     {
       title: "Exclude dates",
       component: <ExcludeDates />

docs-site/src/examples/locale_without_global_variable.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import DatePicker, { registerLocale } from "react-datepicker";
+import fi from "date-fns/locale/fi";
+
+export default class LocaleWithoutGlobalVariable extends React.Component {
+  state = {
+    startDate: null
+  };
+
+  handleChange = date => {
+    this.setState({
+      startDate: date
+    });
+  };
+
+  render() {
+    return (
+      <div className="row">
+        <pre className="column example__code">
+          <code className="jsx">
+            {
+              "// Note: Make sure to npm install the right version of date-fns as"
+            }
+            <br />
+            {
+              "// specified in packaged.json. The default one may not be compatiable"
+            }
+            <br />
+            {"// npm install --save date-fns@version"}
+            <br />
+            {"import DatePicker from 'react-datepicker';"}
+            <br />
+            {"import fi from 'date-fns/locale/fi';"}
+            <br />
+            <br />
+            {"<DatePicker"}
+            <br />
+            {"  selected={this.state.startDate}"}
+            <br />
+            {"  onChange={this.handleChange}"}
+            <br />
+            <strong>{"  locale={fi}"}</strong>
+            <br />
+            {"/>"}
+          </code>
+        </pre>
+        <div className="column">
+          <DatePicker
+            selected={this.state.startDate}
+            onChange={this.handleChange}
+            locale={fi}
+          />
+        </div>
+      </div>
+    );
+  }
+}