govil-strip-loading-tabs

a component which load data from dynamic types by given ApiURL and title to present in boxes

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

You can now import govil-strip-loading-tabs as a normal package installed from npm like so:

import LoadingTabsStrips from 'govil-strip-loading-tabs';
...

You can also import the type definitions if you're using TypeScript like so:

import  LoadingTabsStrips, { LoadingTab, LoadingTabs } from 'govil-strip-loading-tabs';
...

Available props/state Models

export interface LoadingTab {
    title: string;
    sourceUrl: string;
    id: string;
    selected: boolean;
}

export interface LoadingTabs {
    items: Array<LoadingTab>
}

interface StateModel {
    dataItems: Array<LinkableTitleAndDesc>
}

To customize this component, pass ComponentModel to the items prop.

// your-component.tsx
import  LoadingTabsStrips, { LoadingTab, LoadingTabs } from 'govil-strip-loading-tabs';

//for demo:

const LoadingTabsStripsDemo: LoadingTabs = {
    items : [
        {
            title: 'מדריכים ומידע',
            sourceUrl: 'http://localhost/govil/he/api/GeneralSrtripsApi/tryGetTaggedItems',
            id: '1',
            selected: true,
        }, {
            title: 'שירותים',
            sourceUrl: 'http://localhost/govil/he/api/GeneralSrtripsApi/tryGetTaggedItems',
            id: '2',
            selected: false,
        }, {
            title: 'שאלות ותשובות',
            sourceUrl: 'http://localhost/govil/he/api/GeneralSrtripsApi/tryGetTaggedItems',
            id: '3',
            selected: false,
        }
    ]
}

data structure (vm) expected from api:

interface vm {
    items: Array<LinkableTitleAndDesc>;
    resources: { readMoreTitle: string };
}

interface LinkableTitleAndDesc {
    link: string;
    title: string;
    description: string;
}

...
  <LoadingTabsStrips {...LoadingTabsStripsDemo} />
...

This component was built for the benefit of the citizens of Israel on behalf of the government, but of course also for the benefit of the OpenSource community and freely published in npm