Socket
Socket
Sign inDemoInstall

native-x-data-view

Package Overview
Dependencies
7
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    native-x-data-view

Data view component will render progress, error and data depending on state


Version published
Weekly downloads
192
decreased by-40.56%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

native-x-data-view

semantic-release

This component conditionally shows data, progress or error based on the status from API. This wrapper component will provide consistent data handling experience in an application.

Install

Yarn

yarn add native-x-data-view

NPM

npm install native-x-data-view

Usage

import { DataView } from 'native-x-data-view'

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error}>
      ...
    </Stack>
  )
}

API

PropertyDefault ValueUsage
data?: T or null-Data for the view
error?: Error or string or nullfalseError message
showError?: booleantrueShow error if exists
showEmptyMessage?: booleantrueShow empty message if data is empty
showSpinner?: booleantrueShow spinner while the data is being loaded
emptyMessage?: ReactNode or {title?: string, description: string}trueConfigure message to show when the API returns empty data

Configure Empty Message

import { DataView } from 'native-x-data-view'

const emptyMessage = {
  title: 'No data',
  description: 'We could not find what you are looking for'
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} emptyMessage={emptyMessage}>
      ...
    </Stack>
  )
}

You can also pass on a custom view as empty message

import { DataView } from 'native-x-data-view'

function EmptyMessage() {
  return <View>
    <Text>No data</Text>
  </View>
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} emptyMessage={<EmptyMessage />}>
      ...
    </Stack>
  )
}

Configure Error Message

import { DataView } from 'native-x-data-view'

const renderError = (error: Error | string | null) => {
  if (!error) {
    return null
  }
  return <View>
    <Text>Custom error view: {error}</Text>
  </View>
}

function MyComponent() {
  const { data, isLoading, error } = useAPIHook()
  return (
    <DataView data={data} isLoading={isLoading} error={error} renderError={renderError}>
      ...
    </Stack>
  )
}

ErrorMessage component

import { ErrorMessage } from 'native-x-data-view'

function MyComponent() {
  return <ErrorMessage alignCenter>{error}</ErrorMessage>
}

EmptyMessage component

import { EmptyMessage } from 'native-x-data-view'

function MyComponent() {
  return (
    <EmptyMessage
      title='No data'
      alignLeft={false}
      alignCenter={true}
      alignRight={false}
      alignTop={false}
      alignMiddle={true}
      alignBottom={false}
      titleColor={COLOR.ERROR}
      descriptionColor={COLOR.WARNING}
    >
      {'Error description'}
    </EmptyMessage>
  )
}

Automatic Release

Here is an example of the release type that will be done based on a commit messages:

Commit messageRelease type
fix: [comment]Patch Release
feat: [comment]Minor Feature Release
perf: [comment]Major Feature Release
doc: [comment]No Release
refactor: [comment]No Release
chore: [comment]No Release

FAQs

Last updated on 17 Sep 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc