# react-tab-content-view

> React component to display Javascript and JSON objects in title-content format

Latest version **0.1.6** (published 2021-01-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-tab-content-view
pnpm add react-tab-content-view
yarn add react-tab-content-view
bun add react-tab-content-view
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2021-01-12 |
| First published | 2020-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 644.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Eswar |
| Maintainers | peswaram |
| Keywords | react, tabs |

## Links

- npm: https://www.npmjs.com/package/react-tab-content-view
- Repository: https://github.com/tech-troupe/react-tab-content-view
- Issues: https://github.com/tech-troupe/react-tab-content-view/issues
- npm.io page: https://npm.io/package/react-tab-content-view

## Dependencies (18)

- [chai](https://npm.io/package/chai.md) ^4.2.0
- [redux](https://npm.io/package/redux.md) ^4.0.5
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [recompose](https://npm.io/package/recompose.md) ^0.30.0
- [redux-saga](https://npm.io/package/redux-saga.md) ^1.1.3
- [web-vitals](https://npm.io/package/web-vitals.md) ^0.2.4
- [react-redux](https://npm.io/package/react-redux.md) ^7.2.2
- [redux-logger](https://npm.io/package/redux-logger.md) ^3.0.6
- [react-scripts](https://npm.io/package/react-scripts.md) 4.0.1
- [react-json-view](https://npm.io/package/react-json-view.md) ^1.19.1
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.56
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.2
- [react-render-html](https://npm.io/package/react-render-html.md) ^0.6.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.11.2
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^16.4.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^11.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.11.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^12.1.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.6 (latest) — 2021-01-12
- 0.1.5 — 2021-01-04
- 0.1.4 — 2021-01-01
- 0.1.3 — 2021-01-01
- 0.1.2 — 2020-12-29
- 0.1.1 — 2020-12-25
- 0.1.0 — 2020-12-15

## README

![Travis Status](https://img.shields.io/travis/tech-troupe/react-tab-content-view) ![NPM Downloads](https://img.shields.io/npm/dw/react-tab-content-view)![NPM License](https://img.shields.io/npm/l/react-tab-content-view)

# React Tab Content View
React Tab Content View aka ReTCoV is a React component to display contents with titles and/or groups in the form of tabs, allowing users to control the tabs with various options like chips, buttons and checkboxes. This tool would let the users to quickly generate a web page that can display contents, grouped by titles.
<br/><br/>

## Demo In Storybook
Follow below link to view the features provided by this component: </br>
[react-tab-content-view](https://tech-troupe.github.io/react-tab-content-view/)

### Implementation Example
```js
// import the react-tab-content-view component
import ReactTabContentView from 'react-tab-content-view'

// use the component in your app!
// Refer to Sample Source Json Structure section for JSON structure
<ReactTabContentView src={content_in_json_format} />;
```

### Output Examples
<br/>

### Installation Instructions

Install this component with NPM.
```shell
npm install --save react-tab-content-view
```
Or add to your package.json config file:
```json
"dependencies": {
    "react-tab-content-view": "latest"
}
```

### Run Unit Tests
To run unit tests
```shell
npm test
```

### Supported Props
||Name|Type|default|Description|Implementation Status|
|-----|----|----|-----|-------|------|
|1.|src|JSON object|None|This property contains your input JSON|Supported|
|2.|titleType| checkbox, button, chips|chips|Object type to display the titles|Only 'chips' is supported| 
|3.|titleDelete|boolean|true|Titles will have option to delete|Supported|
|4.|titleRefreshAll|boolean|true|Deleted titles can be restored with refresh option|Supported|
|5.|sortTitlesInGroup|boolean|false|Set to true to sort titles.|Not Supported|
|6.|groupControl|string|row default wrapped|Display titles in grid with rows and columns specified|Not Supported|
|7.|searchResult|array|[]|Displays search results (matches) as badges based on the object fed| Supported|
|8.|contentCallback|(title)=>{}|null| Callback function that loads content of each title upon click (for the first time only)| Supported|
|9.|contentDisplayComponent|React component object|null|External react component to be used to display the content|Supported|
|10.|contentDisplayAttributes|array| []| Attrbutes to be used to instantiate the contentDisplayComponent| Supported|
|11.|advancedMode|boolean|false|Enables lazy loading (loading content on the go using contentCallback)|Supported|
|

### Additional Features

- The users can specify the default tab to be display in their input, by adding 'default: true' in their input. Please refer to the JSON structure below for a sample. Kindly note that only one default tab is allowed.

### Future Works

- Title Grouping
- Title display options

### Sample Source Json Structure
```
{
    [
        {
            "grpname":"Group Name1"
            "titles": [
                {
                    "title":"title1",
                    "content":"content1",
                    "default": true
                },
                {
                    "title":"title2",
                    "content":"content2"
                }
            ]
        },
        {
            "grpname":"Group Name2"
            "titles": [
                {
                    "title":"title3",
                    "content":"content3"
                },
                {
                    "title":"title4",
                    "content":"content4",
                    "preselected":true
                }
            ]
        },
    ],
}
```

---
_Source: https://npm.io/package/react-tab-content-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._