The Devlander React Hooks Collection is a comprehensive library of React and 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.
- 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.
You can install the Devlander React Hooks Collection using npm or yarn:
npm
npm install @devlander/hooks
or
yarn
yarn add @devlander/hooks
Each hook in the collection is designed for easy integration. Here are examples of how to use some of our featured hooks:
// ScrollControlComponent.jsx
import React from 'react';
import { useScrollControl } from '@devlander/hooks'; // Adjust the import path as needed
const ScrollControlComponent = () => {
const { disableScroll, enableScroll } = useScrollControl();
return (
<div>
<button onClick={disableScroll}>Disable Scrolling</button>
<button onClick={enableScroll}>Enable Scrolling</button>
<div style={{ height: '150vh', backgroundColor: '#f0f0f0' }}>
<p>Scroll down to see more content...</p>
</div>
</div>
);
};
export default ScrollControlComponent;
// 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({ scaleType: 'window' });
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;
// 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;
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 MyComponent;
- Ensure to run these hooks from the root of your project.
- Follow platform-specific guidelines for React Native and web implementations.
This package is open-source, available under the MIT License.
This template follows the structure of your provided example, adapting it to fit the specifics of the Devlander React Hooks Collection. You can expand each section with more details and code examples as needed.