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.

Demo In Storybook

Follow below link to view the features provided by this component:
react-tab-content-view

Implementation Example

// 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

Installation Instructions

Install this component with NPM.

npm install --save react-tab-content-view

Or add to your package.json config file:

"dependencies": {
    "react-tab-content-view": "latest"
}

Run Unit Tests

To run unit tests

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
                }
            ]
        },
    ],
}