diff --git a/README.md b/README.md index e550838..d0f95aa 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,7 @@ Wrap the jsx that you want to be revealed in your **render** method: ### Properties - `effect` **[string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)** This prop expects a string containing CSS animation effect. You can use any animate.css animations or use any other CSS based animations. If you're using animate.css don't forget to add *animated* base class. **Required**. +- `onReveal` **[function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function)** Function called once the element is revealed. **Optional**. ### Children diff --git a/package.json b/package.json index b4d5939..e631b29 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-reveal", - "version": "0.1.0", + "version": "0.1.1", "author": "Roman Nosov ", "description": "Easily add reveal animation to any React component", "license": "MIT", diff --git a/src/Reveal.js b/src/Reveal.js index c13001c..37042e6 100644 --- a/src/Reveal.js +++ b/src/Reveal.js @@ -13,6 +13,7 @@ const effect: PropTypes.string.isRequired, className: PropTypes.string, style: PropTypes.object, + onReveal: PropTypes.func, children: PropTypes.node.isRequired, }, defaultProps = { @@ -35,6 +36,8 @@ class Reveal extends Component { if (window.pageYOffset + window.innerHeight*0.85 > getAbsoluteOffsetTop(this.refs.el)) { this.setState({ isHidden: false }); this.componentWillUnmount(); + if (typeof this.props.onReveal === 'function') + this.props.onReveal(); } }; @@ -54,7 +57,7 @@ class Reveal extends Component { } render() { - const { effect, style, className, ...props } = this.props; + const { effect, style, className, onReveal, ...props } = this.props; let animation = '', s = {}; if (this.props.effect) { if (this.state.isHidden)