Merge pull request #56 from alvarotrigo/dev

Dev

CONTRIBUTING.md

@@ -3,3 +3,5 @@
 All contributions are welcome
 
 Please note that all functionality is backed by [fullpage.js](https://github.com/alvarotrigo/fullPage.js) so new functionality must be built there first. This repo should remain as a react-wrapper that consolidates state + events.
+
+Please open PRs against the `dev` branch, not `master`, this helps coordinate the release of this package with [fullpage.js](https://github.com/alvarotrigo/fullPage.js)

README.md

@@ -55,10 +55,10 @@ This wrapper creates a ```<ReactFullpage />``` component. It exposes a render-pr
 
 SSR is supported however the server-rendered html will not be styled, this is because window must be present in order to properly set height + width of slides. So long as you rehydrate your fullpage component in the browser environment, regular styles will be applied.
 
-It is also worth noting that when using SSR or a framework such as next.js, you should import the commonjs lib vs the standard umd lib, so your import statement should read
+When using SSR or a framework such as next.js, the component adjusts itself dynamically according to the presence of `window`
 
 ```js
-import ReactFullpage from '@fullpage/react-fullpage/dist/react-fullpage-commonjs';
+import ReactFullpage from '@fullpage/react-fullpage'; // will return static version on server and "live" version on client
 ```
 
 ## Examples
@@ -142,6 +142,8 @@ You can use any [options](https://github.com/alvarotrigo/fullPage.js#options) su
 
 Props object can contain standard [options](https://github.com/alvarotrigo/fullPage.js#options) as well as fullPage.js [callbacks](https://github.com/alvarotrigo/fullPage.js#callbacks).
 
+[Example](https://codesandbox.io/s/8lpo68lp28)
+
 More on callbacks [here](https://github.com/alvarotrigo/react-fullpage#callbacks)
 
 *NOTE: jquery must be passed as a prop ($) if using the v2 API*
@@ -156,6 +158,10 @@ You can use any of them. These are made available as properties on the imported
 Each callback name passed to the component will maintain state itself and this will be reflected via the [render prop](#usage)
 Callback parameters and the latest callback fired by fullpage.js will be reflected in [state](#state).
 
+## Styles
+
+All fullpage.js styles are loaded from the component via a `<style/>` tag created with javascript. To override fullpage.js styles you must match specificity. Example [here](https://codesandbox.io/s/z2q912835l) in the `overrides.css` file
+
 ## Contributing
 
 Found an issue? Have an idea? Check out the [Contributing](https://github.com/alvarotrigo/react-fullpage/blob/master/CONTRIBUTING.md) guide and open a PR

components/ReactFullpage/index.js

@@ -223,7 +223,7 @@ class ReactFullpage extends React.Component {
       <div id="fullpage">
         {this.state.initialized
           ? this.props.render(this)
-          : <div className="section" />
+          : <div className="section fp-section active" />
         }
       </div>
     );

components/index.js

@@ -1,14 +1,18 @@
 /* eslint-disable */
 import Wrapper from './Wrapper';
 
-let exported;
+export default (() => {
+  let exported;
 
-if (typeof window !== 'undefined') {
-  exported = require('./ReactFullpage').default;
-} else {
-  exported = require('./ReactFullpageShell').default;
-}
+  if (typeof window !== 'undefined') {
+    exported = require('./ReactFullpage').default;
+  } else {
+    // NOTE: SSR support
+    exported = require('./ReactFullpageShell').default;
+  }
 
-exported.Wrapper = Wrapper;
+  console.log({ exported })
+  exported.Wrapper = Wrapper;
 
-export default exported;
+  return exported;
+})();

example/README.md

@@ -1,6 +1,6 @@
 # Demo using Webpack
 
-> A Reac.js project
+> A React.js project
 
 ## Build Setup
 

example/src/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ReactFullpage from '../../dist/react-fullpage';
+import ReactFullpage from '../../components';
 
 import 'fullpage.js/vendors/scrolloverflow'; // Optional. When using scrollOverflow:true
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@fullpage/react-fullpage",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

webpack.config.js

@@ -11,7 +11,7 @@ const dirApp = path.join(__dirname, 'example', 'src');
 const dirAssets = path.join(__dirname, 'assets');
 const appHtmlTitle = name;
 
-const { banner } = require('./components/Utils')
+const { banner } = require('./components/Utils');
 
 /**
  * Webpack Configuration
@@ -40,7 +40,7 @@ module.exports = {
     }),
 
     new webpack.BannerPlugin({
-      banner: banner,
+      banner,
       raw: true,
       entryOnly: true
     }),