govil-button-expand

A Button to use for collapsing/expanding more content.

How to use

Clone this repo to your local computer, then run:

• npm install && npm run build

You can now import govil-button-expand as a normal package installed from npm like so:

import ExpandCollapseButton from 'govil-button-expand';
...

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

import ExpandCollapseButton, { Model, IExpandCollapseButton } from 'govil-button-expand'
...

Available props

interface Model {
    vm: IExpandCollapseButton
}

interface IExpandCollapseButton {
    id: string,
    onClickHandler: any,
    expanded: boolean,
    resources: {
        collapseTitle: string,
        expandTitle: string,
    }
}

To customise this component, pass in a viewModel to the vm prop.

// your-component.js
import ExpandCollapseButton from 'govil-button-expand';

...
 <ExpandCollapseButton vm={{
    id: 'some_exp_col_links_btn',
    resources: {
        collapseTitle: 'see less',
        expandTitle: 'see more links',
    },
    expanded: this.state.isExpandedLinks,
    onClickHandler: () => { 
        this.setState({ isExpandedLinks: !this.state.isExpandedLinks });
       ...
    }
}} />
...

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