/higher-order-components

Primary LanguageTypeScriptOtherNOASSERTION

Devlander Higher Order Components Collection Header

#DevlanderHigherOrderComponents Join Devlander on Discord npm downloads Join the discussion on Github Join Devlander on Twitch Follow Landon Johnson On Twitter Wakatime Devlander higher-order-components

Hits

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

npm install @devlander/higher-order-components

yarn

yarn add @devlander/higher-order-components

Usage

withBorders

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<MyComponentProps> = ({ message, withBorders, borderColor }) => (
  <View>
    <Text>{message}</Text>
  </View>
);

const EnhancedComponent = withBorders(MyComponent);

// Usage example
<EnhancedComponent message="Hello, world!" withBorders={true} borderColor="blue" />

withLogProps

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<MyComponentProps> = ({ message }) => (
  <View>
    <Text>{message}</Text>
  </View>
);

const EnhancedComponent = withLogProps(MyComponent);

// Usage example
<EnhancedComponent message="Hello, world!" />
// This would console.log("Actual Props: ", { message: "Hello, world!" })

withVisibilitySensor

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<MyComponentProps> = ({ isVisible, message }) => (
  <View>
    <Text>{isVisible ? "Visible" : "Not Visible"}: {message}</Text>
  </View>
);

const EnhancedComponent = withVisibilitySensor(MyComponent);

// Usage example
<EnhancedComponent message="Hello, world!" />

withMediaQueryInfo

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<MyComponentProps> = ({ mediaQueryInfo, message }) => (
  <View>
    <Text>{mediaQueryInfo.large ? "Large Screen" : "Small Screen"}: {message}</Text>
    <Text>Media Query Info:</Text>
    <Text>xSmall: {mediaQueryInfo.xSmall.toString()}</Text>
    <Text>Small: {mediaQueryInfo.small.toString()}</Text>
    <Text>Medium: {mediaQueryInfo.medium.toString()}</Text>
    <Text>Large: {mediaQueryInfo.large.toString()}</Text>
    <Text>xLarge: {mediaQueryInfo.xLarge.toString()}</Text>
    <Text>xxLarge: {mediaQueryInfo.xxLarge.toString()}</Text>
    <Text>Platform: {mediaQueryInfo.platform}</Text>
  </View>
);

const EnhancedComponent = withMediaQueryInfo(MyComponent);

// Usage example
<EnhancedComponent message="Hello, world!" />

withSpinner

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<MyComponentProps> = ({ message, shouldSpin, spinnerComponent }) => (
  // If `shouldSpin` is true, a spinner would show instead of this component.
  <View>
    <Text>{message}</Text>
  </View>
);

const EnhancedComponent = withSpinner(MyComponent);

// Usage example
<EnhancedComponent shouldSpin={true} message="Loading..." />

// Usage with custom spinner component
const CustomSpinner: React.FC = () => (
  <View>
    <Text>Loading...</Text>
  </View>
);

// Enhanced component with custom spinner
const EnhancedComponentWithCustomSpinner = withSpinner(MyComponent);

// In the application
<EnhancedComponentWithCustomSpinner shouldSpin={true} spinnerComponent={CustomSpinner} message="Hello, world!" />

Contributing

Contributions are welcome! Please read our contributing guidelines first.

License

This project is licensed under the Apache License - see the LICENSE file for details.

Connect with Us

Become a Sponsor!