0.0.2 • Published 3 years ago
govil-arranged-elements-wrapper v0.0.2
govil-button
A simply component written with TypeScript to present a button with arrow icon before for prev or after for next.
How to use
Clone this repo to your local computer, then run:
npm install && npm run build
You can now import govil-button
as a normal package installed from npm like so:
import Button from 'govil-button';
...
Available props
interface Model {
vm: Button
}
interface Button {
id: string,
title: string,
url: string,
isInternal: boolean,
onClickHandler: any, //function
disabled: boolean,
arrow?: Arrow
}
interface Arrow {
toStart: boolean
}
To customise this component, pass in a viewModel to the vm
prop.
// your-component.js
import Button from 'govil-button'
...
<Button vm={{
id: "prev",
isInternal: true,
title: this.props.resources.prevTitle,
url: "#prev",
onClickHandler: (e: Event) => {
e.preventDefault();
if (this.state.currentStepIndex > 0)
this.setCurrentStep(..);
},
disabled: this.state.currentStepIndex <= 0,
arrow: { toStart: true }
}} />
<Button vm={{
id: "next",
isInternal: true,
title: this.props.resources.nextTitle,
url: "#next",
onClickHandler: (e: Event) => {
e.preventDefault();
if (this.state.currentStepIndex < this.props.steps.length - 1)
this.setCurrentStep(..);
},
disabled: this.state.currentStepIndex >= this.props.steps.length - 1
}} />
...
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