@devlander/hooks

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.
• useOnClickByStyle: Handle click events based on specific styles or classes.

Installation

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

npm

npm install @devlander/hooks

or

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;

useOnClickByStyle

import React from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { useOnPressByStyle } from '@devlander/hooks';

const ExampleComponent = () => {
  const onPressFunction = () => console.log('Button with special style pressed!');

  const getOnPress = useOnPressByStyle({
    styleName: 'specialButton', // The specific style key to look for
    onPress: onPressFunction,
  });

  return (
    <View>
      <TouchableOpacity
        style={styles.specialButton}
        onPress={getOnPress(styles.specialButton)}
      >
        <Text>Button with Special Style</Text>
      </TouchableOpacity>

      <TouchableOpacity
        style={styles.regularButton}
        onPress={getOnPress(styles.regularButton)}
      >
        <Text>Regular Button</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  specialButton: {
    // Define the style with the key 'specialButton'
  },
  regularButton: {
    // Regular button styles
  },
});

export default ExampleComponent;

Notes

• Ensure to run these hooks from the root of your project.
• Follow platform-specific guidelines for React Native implementations.

License

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