react-slingshot-web-components

A library of reusable web components used at Slingshot.

Install

npm react-slingshot-web-components

Button

Props

label string

• The text label.

onClick function

• The function to be called when the click event is triggered.

Input

Props

placeholder string

• The text placeholder.

inputFocusColor string (color)

• Sets the inputs focus color.

fontSize int

• Sets the inputs font size.

inputStyle obj (jsx-style)

• Overrides the inputs styles.

onChange function

• The function to be called when the change event is triggered.

onFocus function

• The function to be called when the focus event is triggered.

onBlur function

• The function to be called when the blur event is triggered.

Public Methods

focus function()

• Programmatically focus the input element.

blur function()

• Programmatically blur the input element.

getValue function() => value

• Returns the current value in the input.

select function()

• Programmatically select the input elements text for editing.

setValue function(value: string)

• Set the current value in the input to the value passed in as an argument.

resetValue function

• Resets the current value in the input to an empty string.

Dropdown

Props

options array [{label, value}]

• An array of objects with a label and value property.

selectedLabelStyle obj (jsx-style)

• Overrides the currently selected label styles when the dropdown is closed.

optionsContainerStyle obj (jsx-style)

• Overrides the dropdown options container styles.

selectedOptionStyle obj (jsx-style)

• Overrides the currently selected option styles when the dropdown is open.

hoverOptionStyle ob (jsx-style)

• Overrides the currently hovered option styles when the dropdown is open.

optionStyle obj (jsx-style)

• Overrides the option list item styles.

optionOnClickHandler function (selectedOption {value, label}) => void

• The function to be called when the option is selected.

Public Methods

getValue function() => value

• Returns the currently selected option object.

setOptionsIndex function(index: int)

• Set the currently selected option index.

resetOptionsIndex function

• Resets the currently selected option index to 0.

CheckBox

Props

checkedColor string

• Overrides the default primary color of the checkBox when checked.

unCheckedColor string

• Overrides the default primary color of the checkBox when unchecked.

size string

• Overrides the default primary size of the checkBox.

onClick function

• The function to be called when the click event is triggered.

Public Methods

setChecked function() => void

• Sets the current state of the checkBox programmatically to checked.

setUnChecked function() => void

• Sets the current state of the checkBox programmatically to unChecked.

isChecked function() => boolean

• Returns a boolean of whether or no the checkBox is currently checked.

disableClick function() => void

• Does not allow the checkbox state to be changed.

enableClick function() => void

• Allows the checkbox state to be changed.

isDisabled function() => boolean

• Returns a boolean of whether or no the checkBox is currently disabled.