JSPM

@devlander/higher-order-components

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 5
  • Score
    100M100P100Q26711F
  • License Proprietary

Higher order components used in projects

Package Exports

  • @devlander/higher-order-components
  • @devlander/higher-order-components/dist/cjs/index.js
  • @devlander/higher-order-components/dist/esm/index.js
  • @devlander/higher-order-components/dist/umd/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devlander/higher-order-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Devlander High 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 high-order-components

Devlander React Native High Order Components Collection

Introduction

The Devlander React Native High Order Components Collection is a comprehensive library of React Native high-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.

  • 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 High Order Components Collection using npm or yarn:

npm

npm install @devlander/high-order-components

yarn

yarn add @devlander/high-order-components

Usage

withBorders

import React from "react";
import { View, Text } from "react-native";
import { withBorders } from "@devlander/high-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/high-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/high-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/high-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/high-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 MIT License - see the LICENSE file for details.

Connect with Us