diff --git a/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
new file mode 100644
index 0000000000..1193681e9c
--- /dev/null
+++ b/docs/app/Examples/behaviors/Visibility/Settings/VisibilityExampleFireOnMount.js
@@ -0,0 +1,112 @@
+import React, { Component } from 'react'
+import { Divider, Grid, Image, Table, Segment, Visibility } from 'semantic-ui-react'
+
+export default class VisibilityExampleFireOnMount extends Component {
+ state = {
+ calculations: {
+ height: 0,
+ width: 0,
+ topPassed: false,
+ bottomPassed: false,
+ pixelsPassed: 0,
+ percentagePassed: 0,
+ topVisible: false,
+ bottomVisible: false,
+ fits: false,
+ passing: false,
+ onScreen: false,
+ offScreen: false,
+ },
+ }
+
+ handleOnScreen = (e, { calculations }) => this.setState({ calculations })
+
+ handleOffScreen = (e, { calculations }) => this.setState({ calculations })
+
+ render() {
+ const { calculations } = this.state
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Calculation
+ Value
+
+
+
+
+ pixelsPassed
+ {calculations.pixelsPassed.toFixed()}px
+
+
+ percentagePassed
+ {(calculations.percentagePassed * 100).toFixed()}%
+
+
+ fits
+ {calculations.fits.toString()}
+
+
+ width
+ {calculations.width.toFixed()}px
+
+
+ height
+ {calculations.height.toFixed()}px
+
+
+ onScreen
+ {calculations.onScreen.toString()}
+
+
+ offScreen
+ {calculations.offScreen.toString()}
+
+
+ passing
+ {calculations.passing.toString()}
+
+
+ topVisible
+ {calculations.topVisible.toString()}
+
+
+ bottomVisible
+ {calculations.bottomVisible.toString()}
+
+
+ topPassed
+ {calculations.topPassed.toString()}
+
+
+ bottomPassed
+ {calculations.bottomPassed.toString()}
+
+
+
+
+
+ )
+ }
+}
diff --git a/docs/app/Examples/behaviors/Visibility/Settings/index.js b/docs/app/Examples/behaviors/Visibility/Settings/index.js
index e2f372d761..c68dbd1dfc 100644
--- a/docs/app/Examples/behaviors/Visibility/Settings/index.js
+++ b/docs/app/Examples/behaviors/Visibility/Settings/index.js
@@ -5,14 +5,19 @@ import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
const VisibilityExample = () => (
+
diff --git a/docs/app/Examples/behaviors/Visibility/Types/index.js b/docs/app/Examples/behaviors/Visibility/Types/index.js
index 08f39c1ec4..ceed463a2b 100644
--- a/docs/app/Examples/behaviors/Visibility/Types/index.js
+++ b/docs/app/Examples/behaviors/Visibility/Types/index.js
@@ -7,7 +7,7 @@ const VisibilityExample = () => (
diff --git a/src/behaviors/Visibility/Visibility.d.ts b/src/behaviors/Visibility/Visibility.d.ts
index dc7ad7fdb8..1ce1d60b90 100644
--- a/src/behaviors/Visibility/Visibility.d.ts
+++ b/src/behaviors/Visibility/Visibility.d.ts
@@ -18,6 +18,9 @@ export interface VisibilityProps {
*/
continuous?: boolean;
+ /** Fires callbacks immediately after mount. */
+ fireOnMount?: boolean;
+
/**
* Element's bottom edge has passed top of screen.
*
diff --git a/src/behaviors/Visibility/Visibility.js b/src/behaviors/Visibility/Visibility.js
index 547cda644b..ef41889e02 100644
--- a/src/behaviors/Visibility/Visibility.js
+++ b/src/behaviors/Visibility/Visibility.js
@@ -30,6 +30,9 @@ export default class Visibility extends Component {
*/
continuous: PropTypes.bool,
+ /** Fires callbacks immediately after mount. */
+ fireOnMount: PropTypes.bool,
+
/**
* Element's bottom edge has passed top of screen.
*
@@ -173,15 +176,17 @@ export default class Visibility extends Component {
componentDidMount() {
if (!isBrowser) return
- const { context } = this.props
- context.addEventListener('scroll', this.handleScroll)
+ const { context, fireOnMount } = this.props
+
+ context.addEventListener('scroll', this.handleUpdate)
+ if (fireOnMount) this.handleUpdate()
}
componentWillUnmount() {
if (!isBrowser) return
const { context } = this.props
- context.removeEventListener('scroll', this.handleScroll)
+ context.removeEventListener('scroll', this.handleUpdate)
}
execute = (callback, name) => {
@@ -274,7 +279,7 @@ export default class Visibility extends Component {
handleRef = c => (this.ref = c)
- handleScroll = () => {
+ handleUpdate = () => {
const { bottom, height, top, width } = this.ref.getBoundingClientRect()
const topPassed = top < 0
diff --git a/test/specs/behaviors/Visibility/Visibility-test.js b/test/specs/behaviors/Visibility/Visibility-test.js
index 703a37a335..a9da20a139 100644
--- a/test/specs/behaviors/Visibility/Visibility-test.js
+++ b/test/specs/behaviors/Visibility/Visibility-test.js
@@ -185,6 +185,21 @@ describe('Visibility', () => {
})
})
+ describe('fireOnMount', () => {
+ it('fires callbacks after mount', () => {
+ const onUpdate = sandbox.spy()
+
+ mockScroll(0, 0)
+ wrapperMount()
+
+ onUpdate.should.have.been.calledOnce()
+ onUpdate.should.have.been.calledWithMatch(null, {
+ calculations: { height: 0, width: 0 },
+ fireOnMount: true,
+ })
+ })
+ })
+
describe('onPassed', () => {
it('fires callback when pixels passed', () => {
const onPassed = {