https://github.com/devlander-software/hooks
Devlander Hooks
https://github.com/devlander-software/hooks
Last synced: 5 months ago
JSON representation
Devlander Hooks
- Host: GitHub
- URL: https://github.com/devlander-software/hooks
- Owner: Devlander-Software
- License: mit
- Created: 2023-10-10T18:43:02.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-23T23:52:51.000Z (over 1 year ago)
- Last Synced: 2025-09-28T02:39:56.414Z (9 months ago)
- Language: HTML
- Size: 179 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/devlander-react-hooks/deploys)
# 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
```bash
npm install @devlander/hooks
```
or
yarn
```bash
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
```typescript
// 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 (
Scroll down to see more content...
);
};
export default ScrollControlComponent;
```
### useScreenDimensions
```typescript
// 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 (
Screen Width: {width}
Screen Height: {height}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
export default ExampleComponent;
```
### useVisibilitySensor
```typescript
// 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 (
Visibility Tracking Component
);
};
export default MyVisibilityComponent;
```
## Notes
- Follow platform-specific guidelines for React Native implementations.
## License
This package is open-source, available under the MIT License.
### [Become a Sponsor!](https://bit.ly/sponsor-landonjohnson-github/)
**To do**
write documentation on the providers and how you can tie them into the hook