react-tab-content-view

    0.1.6 • Public • Published

    Travis Status NPM DownloadsNPM License

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

    Keywords

    Install

    npm i react-tab-content-view

    DownloadsWeekly Downloads

    1

    Version

    0.1.6

    License

    MIT

    Unpacked Size

    660 kB

    Total Files

    92

    Last publish

    Collaborators

    • avatar