Package Exports

@devlander/hooks
@devlander/hooks/dist/cjs/index.js
@devlander/hooks/dist/esm/index.js
@devlander/hooks/dist/umd/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devlander/hooks) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Devlander React Native Hooks Collection

Introduction

The Devlander React Native Hooks Collection is a comprehensive library of React Native hooks, designed for seamless integration and addressing common development challenges. This collection streamlines your development process, offering versatile, cross-platform solutions for a variety of use cases.

Featured Hooks

useScrollControl: Manage scrolling behavior in your application.
useScreenDimensions: Access screen dimensions for responsive designs.
useVisibilitySensor: Detect when an element is visible on the screen.

Installation

You can install the Devlander React Native Hooks Collection using npm or yarn:

npm

npm install @devlander/hooks

yarn

yarn add @devlander/hooks

Usage

Each hook in the collection is designed for easy integration. Here are examples of how to use some of our featured hooks:

useScrollControl

// ScrollControlComponent.tsx
import React from 'react';
import { Button, View } from 'react-native';
import { useScrollControl } from '@devlander/hooks'; // Adjust the import path as needed

const ScrollControlComponent = () => {
  const { disableScroll, enableScroll } = useScrollControl();

  return (
    <View>
      <Button title="Disable Scrolling" onPress={disableScroll} />
      <Button title="Enable Scrolling" onPress={enableScroll} />
      <View style={{ height: 1000, backgroundColor: '#f0f0f0' }}>
        <Text>Scroll down to see more content...</Text>
      </View>
    </View>
  );
};

export default ScrollControlComponent;

useScreenDimensions

// ExampleComponent.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useScreenDimensions } from '@devlander/hooks'; // Adjust the import path as needed

const ExampleComponent = () => {
  const { width, height } = useScreenDimensions();

  return (
    <View style={styles.container}>
      <Text>Screen Width: {width}</Text>
      <Text>Screen Height: {height}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default ExampleComponent;

useVisibilitySensor

// MyVisibilityComponent.tsx
import React from 'react';
import { View, Text } from 'react-native';
import { useVisibilitySensor } from '@devlander/hooks'; // Adjust import path

const MyVisibilityComponent = () => {
  const viewRef = useVisibilitySensor(isVisible => console.log(`Is Visible: ${isVisible}`));

  return (
    <View ref={viewRef} style={{ height: 100, width: 100, backgroundColor: 'blue' }}>
      <Text>Visibility Tracking Component</Text>
    </View>
  );
};

export default MyVisibilityComponent;

Notes

Follow platform-specific guidelines for React Native implementations.

License

This package is open-source, available under the MIT License.

To do write documentation on the providers and how you can tie them into the hook

@devlander/hooks