react-tab-content-view v0.1.6

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

|

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