diff --git a/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js
new file mode 100644
index 0000000000..06a4c283ea
--- /dev/null
+++ b/docs/app/Examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react'
+import { Grid, Responsive, Segment } from 'semantic-ui-react'
+
+export default class ResponsiveExampleFireOnMount extends Component {
+ state = {}
+
+ handleOnUpdate = (e, { width }) => this.setState({ width })
+
+ render() {
+ const { width } = this.state
+ const textAlign = width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'
+
+ return (
+
+
+
+ This grid has responsive align of the text. It will be right aligned on computer and left aligned on other
+ breakpoins.
+
+
+
+ )
+ }
+}
diff --git a/docs/app/Examples/addons/Responsive/Usage/index.js b/docs/app/Examples/addons/Responsive/Usage/index.js
index e4f3ebe169..89d112ef12 100644
--- a/docs/app/Examples/addons/Responsive/Usage/index.js
+++ b/docs/app/Examples/addons/Responsive/Usage/index.js
@@ -15,6 +15,11 @@ const ResponsiveUsageExamples = () => (
description='Responsive listens for window resize events and calls event handler.'
examplePath='addons/Responsive/Usage/ResponsiveExampleOnUpdate'
/>
+
)
diff --git a/src/addons/Responsive/Responsive.d.ts b/src/addons/Responsive/Responsive.d.ts
index 5a52c3d181..3439073502 100644
--- a/src/addons/Responsive/Responsive.d.ts
+++ b/src/addons/Responsive/Responsive.d.ts
@@ -9,6 +9,9 @@ export interface ResponsiveProps {
/** Primary content. */
children?: React.ReactNode;
+ /** Fires callbacks immediately after mount. */
+ fireOnMount?: boolean;
+
/** The maximum width at which content will be displayed. */
maxWidth?: number | string;
diff --git a/src/addons/Responsive/Responsive.js b/src/addons/Responsive/Responsive.js
index d0c299c6f5..3e47a68fcc 100644
--- a/src/addons/Responsive/Responsive.js
+++ b/src/addons/Responsive/Responsive.js
@@ -21,6 +21,9 @@ export default class Responsive extends Component {
/** Primary content. */
children: PropTypes.node,
+ /** Fires callbacks immediately after mount. */
+ fireOnMount: PropTypes.bool,
+
/** The maximum width at which content will be displayed. */
maxWidth: PropTypes.oneOfType([
PropTypes.number,
@@ -59,7 +62,10 @@ export default class Responsive extends Component {
}
componentDidMount() {
+ const { fireOnMount } = this.props
+
eventStack.sub('resize', this.handleResize, { target: 'window' })
+ if (fireOnMount) this.handleUpdate()
}
componentWillUnmount() {
diff --git a/test/specs/addons/Responsive/Responsive-test.js b/test/specs/addons/Responsive/Responsive-test.js
index 50849bdcd6..056beda8d9 100644
--- a/test/specs/addons/Responsive/Responsive-test.js
+++ b/test/specs/addons/Responsive/Responsive-test.js
@@ -15,6 +15,22 @@ describe('Responsive', () => {
})
})
+ describe('fireOnMount', () => {
+ it('do not fire onUpdate by default', () => {
+ const onUpdate = sandbox.spy()
+ mount()
+
+ onUpdate.should.have.not.been.called()
+ })
+
+ it('fires onUpdate after mount when true', () => {
+ const onUpdate = sandbox.spy()
+ mount()
+
+ onUpdate.should.have.been.calledOnce()
+ })
+ })
+
describe('maxWidth', () => {
it('renders when fits', () => {
sandbox.stub(window, 'innerWidth').value(Responsive.onlyMobile.maxWidth)