Reagent
A collection of UI components
Getting Started
-
Get an image gallery component along with event handlers for the consumer to execute when, or if, those events shall occur within their application
import { getImageGalleryWithChangeHandlers } from '@mtbjorn/reagent`; import { renderElementAsAppend } from '@mtbjorn/hypotenuse`; const initialFolderData = []; // an array of objects -> { folder, images }, with images being an array of objects -> { fileId, fileName, url } const [galleryComponent, onComponentRender, onDataChange] = getImageGalleryWithChangeHandlers(initialFolderData, 'initialSelectedFolder'); const domElement = renderElementAsAppend(galleryComponent, document.getElementById('app-container')); onComponentRender(domElement); const newImages = []; onDataChange(newImages);
-
initialFolderData
is an optional argument, an array of objects ({folder, images}
), where images is an array of objects ({fileId, fileName, url}
) for each image to display within the gallery-
fileId
is a string identifier, currently only used as theid
attribute of each generated<ImageFrame />
component -
fileName
is a string, currently used as thealt
&title
attributes of each generated<ImageFrame />
component -
url
is any data url valid for an<img>
element'ssrc
attribute
-
-
galleryComponent
is a pre-built component, a pure function which can be rendered as the consumer wishes - It is expected the consumer will call
onComponentRender
after the associated<ImageGallery>
component is rendered- A reference to the rendered dom element should be provided as the sole argument
- This
async
function initializes the<ImageGallery>
, mainly preparing the associated<ImageGalleryModal>
- The consumer may refresh the
<ImageGallery>
with a new array of image data by providing said data to theonDataChange
function - Switching between folders is handled within the gallery component itself
-
-
Get an image uploading component
import { ImageUploader } from '@mtbjorn/reagent`; import { renderElementAsAppend } from '@mtbjorn/hypotenuse`; renderElementAsAppend(<ImageUploader title={'Input Title'}, disabled={trueOrFalse}, handleFileUpload={(fileObjectArray) => {}}, onUploadFailure = {(errorMessageArray) => {}}, maxFileSizeMb={10} maxFileSizeToleranceKb={50} />, document.getElementById('app-container') );
-
title
is thetitle
for the underlyinginput
element - If
disabled
, the uderlyinginput
element will be disabled -
handleFileUpload
should be a function which will operate on eachFile
object uploaded through the underlyinginput
element -
onUploadFailure
is a function to handle any errors thrown while uploading files- The function should accomodate an array of error messages, one for each file that failed during a batch upload
- The default error handler, if none is provided, will print to
console
-
maxFileSizeMb
is the max size (in MB) to allow being uploaded- image files, except for
gif
, will be resized to less than the specified max, within a specified tolerance - If unspecified a default of
10MB
is used
- image files, except for
-
maxFileSizeToleranceKb
is the tolerance (in Kb) to permit a resized image to fall within (below the max)- If unspecified a default of
50Kb
is used
- If unspecified a default of
-
ico
files are ignored by the uploader
-