govil-strip-menu-icons

A strip of boxes that includes a big icon centered. Implemented with Router & Link.

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

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

import StripMenuIcons from 'govil-strip-menu-icons';
...

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

import StripMenuIcons, { ISItems, ISItem } from 'govil-strip-menu-icons';
...

Available props

interface ISItems {
    items: Array<ISItem>
}

interface ISItem {
    link: string; // router link
    icon: string; // image src url
    title: string; //on Hover ect
}

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

// your-component.tsx
import StripMenuIcons, { ISItems } from 'govil-strip-menu-icons';

const StripMenuIconsDemo: ISItems = {
  items: [{
      icon: 'https://www.gov.il/BlobFolder/../a.png',
      link: '/a', 
      title: 'title a'
  },{
      icon: 'https://www.gov.il/BlobFolder/../b.png',
      link: '/b', 
      title: 'title b'
  },{
      icon: 'https://www.gov.il/BlobFolder/../c.png',
      link: '/c', 
      title: 'title c'
  },{
      icon: 'https://www.gov.il/BlobFolder/../d.png',
      link: '/d', 
      title: 'title d'
  },{
      icon: 'https://www.gov.il/BlobFolder/../e.png',
      link: '/e', 
      title: 'title e'
  }]
}

...

<StripMenuIcons {...StripMenuIconsDemo }/>
//or <StripMenuIcons items={StripMenuIconsDemo.items}/>
...

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