Adding new StyledFirebaseAuth component that incorporates the CSS

Author: Nicolas Garnier

README.md

@@ -22,20 +22,25 @@ npm install --save firebase
 ```
 
 In your app:
-  1. Import the `FirebaseAuth` component from `react-firebaseui` and import `firebase`.
+  1. Import the `FirebaseAuth` or the `StyledFirebaseAuth` component from `react-firebaseui` and import `firebase`.
   2. Configure Firebase as described in [the Firebase Docs](https://firebase.google.com/docs/web/setup).
   3. Write a Firebase UI configuration as described in [firebase/firebaseui-web](https://github.com/firebase/firebaseui-web#configuration).
   4. Use the `FirebaseAuth` component in your template passing it the **Firebase UI configuration** and a **Firebase Auth instance**.
 
 
-### Using `FirebaseAuth` with a redirect
+### `FirebaseAuth` vs `StyledFirebaseAuth`
+
+There are two components that allow you to add FirebaseUI auth to your application: `FirebaseAuth` and `StyledFirebaseAuth`. The difference is that `FirebaseAuth` has a reference to the Firebase UI CSS (it `requires` the CSS) whereas `StyledFirebaseAuth` includes the CSS directly in its built. For simplicity you should use `StyledFirebaseAuth` and for better performances and build sizes you should use `FirebaseAuth`. `FirebaseAuth` is meant to be used with a CSS/style loader as part of yor webpack built configuration. See the [Packing your app](#packing) section
+
+
+### Using `StyledFirebaseAuth` with a redirect
 
 Below is an example on how to use `FirebaseAuth` with a redirect upon sign-in:
 
 ```js
 // Import FirebaseAuth and firebase.
 import React from 'react';
-import { FirebaseAuth } from 'react-firebaseui';
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import firebase from 'firebase';
 
 // Configure Firebase.
@@ -65,7 +70,7 @@ class SignInScreen extends React.Component {
       <div>
         <h1>My App</h1>
         <p>Please sign-in:</p>
-        <FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
+        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()}/>
       </div>
     );
   }
@@ -79,7 +84,7 @@ Below is an example on how to use `FirebaseAuth` with a state change upon sign-i
 ```js
 // Import FirebaseAuth and firebase.
 import React from 'react';
-import { FirebaseAuth } from 'react-firebaseui';
+import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
 import firebase from 'firebase';
 
 // Configure Firebase.
@@ -120,7 +125,7 @@ class SignInScreen extends React.Component {
         <div>
           <h1>My App</h1>
           <p>Please sign-in:</p>
-          <FirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
+          <StyledFirebaseAuth uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
         </div>
       );
     }
@@ -147,16 +152,19 @@ render() {
     <div>
       <h1>My App</h1>
       <p>Please sign-in:</p>
-      <FirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
+      <StyledFirebaseAuth uiCallback={ui => ui.disableAutoSignIn()} uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
     </div>
   );
 }
 ```
 
+<a href="#packing"/>
 
 ## Packing your app
 
-The `FirebaseAuth` component needs a global CSS to get proper styling. The CSS is already imported within `FirebaseAuth`.
+If you are using the `StyledFirebaseAuth` component there should not be special configuration needed to package your app since the CSS is already included within the component. if you would like to extract the CSS you should use the `FirebaseAuth` component instead.
+
+The `FirebaseAuth` needs a global CSS to get proper styling. The CSS is already imported within `FirebaseAuth`.
 If you are using webpack you'll need to add [CSS loaders](https://github.com/webpack-contrib/css-loader):
 
 ```js
@@ -172,6 +180,8 @@ If you are using webpack you'll need to add [CSS loaders](https://github.com/web
 }
 ```
 
+PS: make sure your rule does not exclude `/node_modules/` as this is where the library, and therefore, the CSS is located.
+
 ### With ExtractTextPlugin
 
 If you are using [`ExtractTextPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin) to extract a CSS file from the required CSS files you would typically use:
@@ -194,6 +204,8 @@ If you are using [`ExtractTextPlugin`](https://github.com/webpack-contrib/extrac
 }
 ```
 
+PS: make sure your rule does not exclude `/node_modules/` as this is where the library, and therefore, the CSS is located.
+
 ### With ExtractTextPlugin and CSS modules
 
 If you are using CSS modules in your app you need to handle the CSS files in `/node_modules/` in a separate loader so that they are imported as global CSS files and not modules. Your setup could look like:
@@ -242,7 +254,7 @@ If you are using CSS modules in your app you need to handle the CSS files in `/n
 
 ## Styling 
 
-To change the styling of the `FirebaseAuth` widget you can override its CSS. You can import a CSS that will be included globally in your packed application. For instance create a `firebaseui-overrides.global.css` file and import it in your app:
+To change the styling of the `FirebaseAuth` or the `StyledFirebaseAuth` widget you can override some of its CSS. You can import a CSS that will be included globally in your packed application. For instance create a `firebaseui-overrides.global.css` file and import it in your app:
 
 ```js
 import './firebaseui-overrides.global.css'; // Import globally.
@@ -258,8 +270,8 @@ If you would like to see an example of styling, have a look at the [example app]
 In the case where you would need to load multiple instances of `FirebaseAuth` at the same time you need to set them up with a different ID using the `elementId` attribute. For instance:
 
 ```js
-<FirebaseAuth elementId="auth_1" uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
-<FirebaseAuth elementId="auth_2" uiConfig={this.otherUiConfig} firebaseAuth={firebase.auth()}/>
+<StyledFirebaseAuth elementId="auth_1" uiConfig={this.uiConfig} firebaseAuth={firebase.auth()}/>
+<StyledFirebaseAuth elementId="auth_2" uiConfig={this.otherUiConfig} firebaseAuth={firebase.auth()}/>
 ```