https://github.com/rintoj/native-x-data-view
https://github.com/rintoj/native-x-data-view
Last synced: 20 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/rintoj/native-x-data-view
- Owner: rintoj
- Created: 2021-05-14T09:00:31.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2021-09-17T09:20:35.000Z (almost 5 years ago)
- Last Synced: 2025-02-06T00:53:49.195Z (over 1 year ago)
- Language: TypeScript
- Size: 309 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# native-x-data-view
[](https://github.com/semantic-release/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
```sh
yarn add native-x-data-view
```
### NPM
```sh
npm install native-x-data-view
```
## Usage
```tsx
import { DataView } from 'native-x-data-view'
function MyComponent() {
const { data, isLoading, error } = useAPIHook()
return (
...
)
}
```
## API
| Property | Default Value | Usage |
| ----------------------------------------------------------------- | ------------- | --------------------------------------------------------- |
| data?: T or null | - | Data for the view |
| error?: Error or string or null | false | Error message |
| showError?: boolean | true | Show error if exists |
| showEmptyMessage?: boolean | true | Show empty message if data is empty |
| showSpinner?: boolean | true | Show spinner while the data is being loaded |
| emptyMessage?: ReactNode or {title?: string, description: string} | true | Configure message to show when the API returns empty data |
## Configure Empty Message
```tsx
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 (
...
)
}
```
You can also pass on a custom view as empty message
```tsx
import { DataView } from 'native-x-data-view'
function EmptyMessage() {
return
No data
}
function MyComponent() {
const { data, isLoading, error } = useAPIHook()
return (
}>
...
)
}
```
## Configure Error Message
```tsx
import { DataView } from 'native-x-data-view'
const renderError = (error: Error | string | null) => {
if (!error) {
return null
}
return
Custom error view: {error}
}
function MyComponent() {
const { data, isLoading, error } = useAPIHook()
return (
...
)
}
```
## `ErrorMessage` component
```tsx
import { ErrorMessage } from 'native-x-data-view'
function MyComponent() {
return {error}
}
```
## `EmptyMessage` component
```tsx
import { EmptyMessage } from 'native-x-data-view'
function MyComponent() {
return (
{'Error description'}
)
}
```
## Automatic Release
Here is an example of the release type that will be done based on a commit messages:
| Commit message | Release 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 |