Repository: react-materialize/react-materialize
Pull request #699 (2018-11-23 19:37:27)

Parallax component enhancement
# Description

During development on a side project of mine I noticed that it was impossible to use `style` props or `id` 
on the `Parallax` component.

Moreover, looking at the source code I noticed that the `PropTypes` definition for options was completely wrong and the default options for the `materialize` plugin was just an empty object, instead of the default one as described by the [`materialize` documentation](https://materializecss.com/parallax.html#options).

I also took the occasion to make it possible to pass children to this component, as this was a thing I was experimenting with and I'm pretty happy with the result.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)

# How Has This Been Tested?

I've added a test to ensure that if no `options` are given to this component it would initialize itself with the default one as described by the [documentation](https://materializecss.com/parallax.html#options).

Also added a test to check if the it can correctly render a `children`, as a title, an icon or whatever you want.

# Checklist:

- [x] I have commented my code, particularly in hard-to-understand areas
- [x] My changes generate no new warnings
- [x] I have not generated a new package version. (the maintainers will handle that)



Patch:
diff --git a/src/Parallax.js b/src/Parallax.js
index 0c62d0c..bc39c65 100644
--- a/src/Parallax.js
+++ b/src/Parallax.js
@@ -15,9 +15,13 @@ class Parallax extends Component {
   }
 
   render() {
-    const { className, imageSrc } = this.props;
+    const { children, className, imageSrc, ...props } = this.props;
+
+    delete props.options;
+
     return (
-      <div className={cx('parallax-container', className)}>
+      <div className={cx('parallax-container', className)} {...props}>
+        {children}
         <div
           className="parallax"
           ref={div => {
@@ -32,17 +36,18 @@ class Parallax extends Component {
 }
 
 Parallax.propTypes = {
+  children: PropTypes.node,
   className: PropTypes.string,
   /**
    * The image path which will be used for the background of the parallax
    */
-  imageSrc: PropTypes.string,
-  options: {
+  imageSrc: PropTypes.string.isRequired,
+  options: PropTypes.shape({
     /**
      * The minimum width of the screen, in pixels, where the parallax functionality starts working.
      */
     responsiveThreshold: PropTypes.number
-  }
+  })
 };
 
 Parallax.defaultProps = {


Test patch:
diff --git a/test/Parallax.spec.js b/test/Parallax.spec.js
index 125a394..8e91843 100644
--- a/test/Parallax.spec.js
+++ b/test/Parallax.spec.js
@@ -36,11 +36,28 @@ describe('<Parallax />', () => {
       expect(parallaxInitMock).toHaveBeenCalledTimes(1);
     });
 
+    test('should have default options if none are given', () => {
+      mount(<Parallax />);
+      expect(parallaxInitMock).toHaveBeenCalledWith({
+        responsiveThreshold: 0
+      });
+    });
+
     test('should call Parallax with the given options', () => {
       const options = { responsiveThreshold: 200 };
 
       mount(<Parallax options={options} />);
       expect(parallaxInitMock).toHaveBeenCalledWith(options);
     });
+
+    test('can render children element', () => {
+      const wrapper = shallow(
+        <Parallax imageSrc="image.jpg">
+          <h1>Test</h1>
+        </Parallax>
+      );
+
+      expect(wrapper).toMatchSnapshot();
+    });
   });
 });
diff --git a/test/__snapshots__/Parallax.spec.js.snap b/test/__snapshots__/Parallax.spec.js.snap
index 47be6f4..0261b38 100644
--- a/test/__snapshots__/Parallax.spec.js.snap
+++ b/test/__snapshots__/Parallax.spec.js.snap
@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<Parallax /> initialises can render children element 1`] = `
+<div
+  className="parallax-container"
+>
+  <h1>
+    Test
+  </h1>
+  <div
+    className="parallax"
+  >
+    <img
+      src="image.jpg"
+    />
+  </div>
+</div>
+`;
+
 exports[`<Parallax /> should render a Parallax 1`] = `
 <div
   className="parallax-container"