From src/Checkbox.jsx
Checkbox component using react-switch
prop | type | default | required | description |
---|---|---|---|---|
disabled | Boolean |
false |
❌ | true to disable toggling |
onChange | Function |
✅ | callback when toggled | |
value | Boolean |
❌ | value of the component |
From src/ErrorFormFeedback.jsx
Display errors underneath an input component
prop | type | default | required | description |
---|---|---|---|---|
errors | Union<Array | String> |
❌ | List of errors to display, can be an array or string |
Displays a dropzone for files Dropped files are displayed as a table with option to remove them individually
prop | type | default | required | description |
---|---|---|---|---|
dropText | Union<String | Object> |
'Drag Here to upload' |
❌ | Text or JSX to display in the dropzone |
files | Array |
❌ | list of files to display, can leave blank to not have table shown | |
onDrop | Function |
✅ | callback for when a file is dropped | |
onRemove | Function |
❌ | Callback for when a file is removed required if files prop is not blank |
From src/Input.jsx
Thing wrapper on input tag Displays errors below input
prop | type | default | required | description |
---|---|---|---|---|
className | String |
❌ | additional classnames to add to input tag | |
disabled | Boolean |
false |
❌ | true to disable input |
errorText | Union<String | Array> |
❌ | Errors to display, should be a string or array of strings @type {[type]} | |
onChange | Function |
✅ | Callback when updated | |
style | Object |
❌ | Addition styles | |
type | String |
'text' |
❌ | type of input |
value | * |
❌ | value of component |
From src/SLDate.jsx
Date Input component
prop | type | default | required | description |
---|---|---|---|---|
disabled | Boolean |
false |
❌ | true to disable toggling |
format | String |
'MM/DD/YYYY' |
❌ | How to Format the Presented Date |
inputProps | Object |
❌ | Additional props to add to the input | |
onChange | Function |
✅ | callback when date is selected | |
openLeft | Boolean |
false |
❌ | offset to display calendar in pixels |
timezone | String |
❌ | Timezone to use for for display | |
value | Union<String | Object> |
❌ | Current date to display should be a string, Date(), or moment() |
From src/SLDateRange.jsx
Input which allows user to pick a range of dates wrapper on react-dates
prop | type | default | required | description |
---|---|---|---|---|
buttonText | String |
'Filter' |
❌ | Text for button |
disabled | Boolean |
false |
❌ | true to disable toggling |
endDate | Union<String | Object> |
❌ | value to use as end date | |
id | String |
✅ | Unique ID required | |
onChange | Function |
✅ | callback when start or end date changes | |
startDate | Union<String | Object> |
❌ | value to use as startDate |
From src/SLDateTime.jsx
prop | type | default | required | description |
---|---|---|---|---|
dateFormat | String |
'MM/DD/YYYY' |
❌ | How to Format the Presented Date |
disabled | Boolean |
false |
❌ | true to disable toggling |
inputProps | Object |
❌ | Additional props to add to the input | |
onChange | Function |
✅ | callback when date is selected | |
openLeft | Unknown |
false |
❌ | |
timeFormat | Unknown |
'HH:mm:ss' |
❌ | |
timezone | String |
❌ | Timezone to use for for display | |
value | Union<String | Object> |
❌ | Current date to display should be a string, Date(), or moment() |
From src/SLForm.jsx
Form Component to display as a modal or not
prop | type | default | required | description |
---|---|---|---|---|
Button | Function |
❌ | Function that returns a button * this is passed a cb for the buttons onclick method toggle => Btn | |
fields | Object |
✅ | Form fields to display, should be JSX * recommended to use SLFormGroup wrapped components for best presentation | |
formInValid | Boolean |
❌ | Set to true if the form is not valid this will disable the submit button | |
header | String |
❌ | Header Text for Modal *required if notModal={false} | |
notModal | Boolean |
❌ | Set true if the form should not be a modal | |
onSubmit | Function |
✅ | Callback when form is submitted, expected to return Promise | |
onToggle | Function |
❌ | callback for when the modal is toggled open | |
size | Enum('sm','md','lg','xl') |
❌ | size of the modal | |
submitButton | Function |
❌ | If notModal={true} a custom submit button may be used * this is passed a callback for submit and formInvalid (submit, invalid) => submit |
From src/SLFormGroup.jsx
Wrapper for a form input which will display labels and align elements nicely in an SLForm
prop | type | default | required | description |
---|---|---|---|---|
check | Boolean |
false |
❌ | Set to true if the input is a check or radio to display label correctly |
helpText | String |
❌ | Help text to display when hovering over help icon * useful for giving context to an input value | |
hideLabel | Boolean |
false |
❌ | Set true to hide the label component |
input | Object |
✅ | Form Input JSX | |
label | String |
❌ | Input Label Text |
Select a country code in a dropdown
prop | type | default | required | description |
---|---|---|---|---|
disabled | Boolean |
false |
❌ | true to disable toggling |
onChange | Function |
✅ | callback when a country is selected | |
value | Object |
❌ | current selected country |
From src/SimpleSelect.jsx
Simplified wrapper of react-select
prop | type | default | required | description |
---|---|---|---|---|
disabled | Boolean |
false |
❌ | true to disable toggling |
errorText | Union<String | Array> |
❌ | Errors to display, should be a string or array of strings @type {[type]} | |
labelField | String |
'label' |
❌ | object key to use as the label |
onChange | Function |
✅ | callback when option selected | |
options | Array |
✅ | array of objects to choose from should have keys with value of valueField and labelField props | |
valueField | String |
'_id' |
❌ | object key to use for the value |
From src/TextArea.jsx
Thing wrapper on textarea tag Displays errors below input
prop | type | default | required | description |
---|---|---|---|---|
className | String |
❌ | additional classnames to add to input tag | |
disabled | Boolean |
false |
❌ | true to disable toggling |
onChange | Function |
✅ | Callback when updated | |
value | * |
❌ | value of component |