diff --git a/packages/compose/src/higher-order/with-is-connected/README.md b/packages/compose/src/higher-order/with-is-connected/README.md new file mode 100644 index 00000000000000..d1358357f81427 --- /dev/null +++ b/packages/compose/src/higher-order/with-is-connected/README.md @@ -0,0 +1,19 @@ +# withIsConnected + +`withIsConnected` provides a true/false mobile connectivity status based on the `useIsConnected` hook found in the [bridge](https://github.com/WordPress/gutenberg/blob/trunk/packages/react-native-bridge/index.js). + +## Usage +```jsx +/** + * WordPress dependencies + */ +import { withIsConnected } from '@wordpress/compose'; + +export class MyComponent extends Component { + if ( this.props.isConnected !== true ) { + console.log( 'You are currently offline.' ) + } +} + +export default withIsConnected( MyComponent ) +``` \ No newline at end of file diff --git a/packages/compose/src/higher-order/with-is-connected/index.native.js b/packages/compose/src/higher-order/with-is-connected/index.native.js new file mode 100644 index 00000000000000..a24cdfc9173a19 --- /dev/null +++ b/packages/compose/src/higher-order/with-is-connected/index.native.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useIsConnected } from '@wordpress/react-native-bridge'; + +/** + * Internal dependencies + */ +import { createHigherOrderComponent } from '../../utils/create-higher-order-component'; + +const withIsConnected = createHigherOrderComponent( ( WrappedComponent ) => { + return ( props ) => { + const { isConnected } = useIsConnected(); + return ; + }; +}, 'withIsConnected' ); + +export default withIsConnected; diff --git a/packages/compose/src/index.native.js b/packages/compose/src/index.native.js index a3f959e644f32a..00e0a66a360340 100644 --- a/packages/compose/src/index.native.js +++ b/packages/compose/src/index.native.js @@ -17,6 +17,7 @@ export { default as withInstanceId } from './higher-order/with-instance-id'; export { default as withSafeTimeout } from './higher-order/with-safe-timeout'; export { default as withState } from './higher-order/with-state'; export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme'; +export { default as withIsConnected } from './higher-order/with-is-connected'; // Hooks. export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';