@devlander/hooks NPM

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;