https://github.com/devlander-software/higher-order-components
https://github.com/devlander-software/higher-order-components
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/devlander-software/higher-order-components
- Owner: Devlander-Software
- License: other
- Created: 2023-12-28T22:20:36.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T22:28:42.000Z (over 1 year ago)
- Last Synced: 2025-09-19T20:32:02.334Z (9 months ago)
- Language: TypeScript
- Size: 1010 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
[](https://hits.sh/github.com/Devlander-Software/higher-order-components/)
# Devlander React Native Higher Order Components Collection
## Introduction
The Devlander React Native Higher Order Components Collection is a comprehensive library of React Native higher-order-components, 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 higher-order-components
- **withBorders**: Wraps a container with borders for the sake of troubleshooting where views/divs end.
- **withLogProps**: Logs props in a component.
- **withVisibilitySensor**: Detects if a component is visible or not and passes an `isVisible` property down to the next component, which can be used to pass to another function.
- **withMediaQueryInfo**: Keeps track of the size of the device and viewport, and returns a list of booleans. These are used to do conditional logic when rendering components on different devices, making things responsive.
- **withViewSize**: Keeps track of the height and width of the component it is wrapping.
- **withSpinner**: Displays a spinner while the wrapped component is in a loading state.
## Installation
You can install the Devlander React Native Higher Order Components Collection using npm or yarn:
### npm
```bash
npm install @devlander/higher-order-components
```
### yarn
```bash
yarn add @devlander/higher-order-components
```
## Usage
### withBorders
```tsx
import React from "react";
import { View, Text } from "react-native";
import { withBorders } from "@devlander/higher-order-components";
interface MyComponentProps {
message: string;
withBorders?: boolean;
borderColor?: string;
}
const MyComponent: React.FC = ({ message, withBorders, borderColor }) => (
{message}
);
const EnhancedComponent = withBorders(MyComponent);
// Usage example
```
### withLogProps
```tsx
import React from "react";
import { View, Text } from "react-native";
import { withLogProps } from "@devlander/higher-order-components";
interface MyComponentProps {
message: string;
}
const MyComponent: React.FC = ({ message }) => (
{message}
);
const EnhancedComponent = withLogProps(MyComponent);
// Usage example
// This would console.log("Actual Props: ", { message: "Hello, world!" })
```
### withVisibilitySensor
```tsx
import React from "react";
import { View, Text } from "react-native";
import { withVisibilitySensor } from "@devlander/higher-order-components";
interface MyComponentProps {
isVisible: boolean;
message: string;
}
const MyComponent: React.FC = ({ isVisible, message }) => (
{isVisible ? "Visible" : "Not Visible"}: {message}
);
const EnhancedComponent = withVisibilitySensor(MyComponent);
// Usage example
```
### withMediaQueryInfo
```tsx
import React from "react";
import { View, Text } from "react-native";
import { withMediaQueryInfo, WithMediaQueryProps } from "@devlander/higher-order-components";
interface MyComponentProps extends WithMediaQueryProps {
message: string;
}
const MyComponent: React.FC = ({ mediaQueryInfo, message }) => (
{mediaQueryInfo.large ? "Large Screen" : "Small Screen"}: {message}
Media Query Info:
xSmall: {mediaQueryInfo.xSmall.toString()}
Small: {mediaQueryInfo.small.toString()}
Medium: {mediaQueryInfo.medium.toString()}
Large: {mediaQueryInfo.large.toString()}
xLarge: {mediaQueryInfo.xLarge.toString()}
xxLarge: {mediaQueryInfo.xxLarge.toString()}
Platform: {mediaQueryInfo.platform}
);
const EnhancedComponent = withMediaQueryInfo(MyComponent);
// Usage example
```
### withSpinner
```tsx
import React from "react";
import { View, Text } from "react-native";
import { withSpinner } from "@devlander/higher-order-components";
interface MyComponentProps extends WithSpinnerProps {
message: string;
}
const MyComponent: React.FC = ({ message, shouldSpin, spinnerComponent }) => (
// If `shouldSpin` is true, a spinner would show instead of this component.
{message}
);
const EnhancedComponent = withSpinner(MyComponent);
// Usage example
// Usage with custom spinner component
const CustomSpinner: React.FC = () => (
Loading...
);
// Enhanced component with custom spinner
const EnhancedComponentWithCustomSpinner = withSpinner(MyComponent);
// In the application
```
## Contributing
Contributions are welcome! Please read our [contributing guidelines](https://github.com/Devlander-Software/higher-order-components/blob/main/CONTRIBUTING.md) first.
## License
This project is licensed under the Apache License - see the [LICENSE](https://github.com/Devlander-Software/high-order-components/blob/main/LICENSE) file for details.
## Connect with Us
- Follow us on [Twitter](https://bit.ly/landonwjohnson-on-twitter)
- Join our [Discord](https://bit.ly/devlander-discord-invite)
- Watch us on [Twitch](https://bit.ly/devlander-twitch)
### [Become a Sponsor!](https://bit.ly/sponsor-landonjohnson-github/)