Skip to content

Architectural framework that assists building data-driven apps with React or React Native.

Notifications You must be signed in to change notification settings

devleonardorabelo/skele

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Skele Components

Skele's components package is a library of custom components that aid in building React and React Native apps.

Available Components

Viewport Tracker

Tracks the position and size of a ScrollView, FlatList or SectionList viewport. Communicates it to all viewport aware child components.

Usage

import { Viewport } from '@skele/components'

render() {
  return (
    <Viewport.Tracker>
      <ScrollView scrollEventThrottle={16}>
        { this.props.children }
      </ScrollView>
    </Viewport.Tracker>
  )
}

Viewport Aware

A higher-order component that processes the information communicated by the viewport tracker. Determines whether the wrapped component is in or outside the viewport. Updates the inViewport property of the wrapped component accordingly. Invokes onViewportEnter and onViewportLeave when the component enters or leaves the viewport. Note that handling updates of inViewport is the preferred way of reacting to visibility changes.

Usage

import { Image } from 'react-native'
import { Viewport } from '@skele/components'
const ViewportAwareImage = Viewport.Aware(Image)

render() {
  return (
    <ViewportAwareImage
      source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
      preTriggerRatio={0.5}
      onViewportEnter={() => console.log('Entered!')}
      onViewportLeave={() => console.log('Left!')}
      innerRef={ref => (this._ref = ref)} />
  )
}

Properties

Prop Description Default
preTriggerRatio Determines pre-triggering of inViewport. Useful for rendering components beforehand to improve user experience. A ratio of 0.5 means that the effective viewport will be twice the size of the real viewport. 0
onViewportEnter Invoked when the component enters the viewport. null
onViewportLeave Invoked when the component leaves the viewport. null
innerRef Allows access to the reference of the wrapped component. null

With Placeholder

A higher-order component that can be used to display a placeholder while the wrapped component is not in the viewport. This can improve user experience since it can serve as a mechanism for lazy loading.

Usage

import { Image, View } from 'react-native'
import { Viewport } from '@skele/components'

const Placeholder = () =>
  <View style={{ width: 50, height: 50, backgroundColor: 'darkgrey' }} />

const VAImgWithPlaceholder =
  Viewport.Aware(
    Viewport.WithPlaceholder(Image, Placeholder)
  )

render() {
  return (
    <VAImgWithPlaceholder
      // placeholder={Placeholder} // passing down a placeholder at render time
      source={{ uri: 'https://facebook.github.io/react-native/img/header_logo.png' }}
      preTriggerRatio={0.5}
      retainOnceInViewport={true}
      style={{ width: 50, height: 50 }} />
  )
}

Properties

Prop Description Default
placeholder Useful for passing down a placeholder at render time. null
retainOnceInViewport Whether to keep the wrapped component displayed once it enters the viewport. false

About

Architectural framework that assists building data-driven apps with React or React Native.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%