editorify-dev
v1.1.1
Published
A versatile open-source package providing reusable UI components for backend systems and development, including a powerful text-to-HTML editor ,intuitive image uploader, calendar etc. Designed to simplify content management and enhance user interfaces for
Downloads
451
Maintainers
manikantadev254Readme
editorify-dev
Editorify is A versatile open-source package providing reusable UI components for backend systems and development, including a powerful text-to-HTML editor ,intuitive image uploader, calendar etc. Designed to simplify content management and enhance user interfaces for e-commerce platforms and other web applications.
Table of Contents
Installation
To install the package, use either npm or yarn:
Using npm
npm install editorify-devUsing yarn
yarn add editorify-devImage Uploader
The image uploader component streamlines image uploads with a responsive UI ideal for web development and e-commerce. Users can easily drag and reposition images, ensuring a polished look. Its compatibility with any JavaScript environment makes it a must-have for seamless image management.
Usage React
Example component
import React from "react";
import { ImageUploaderComponent } from "editorify-dev/imageUploader";
import "editorify-dev/css/imageUploader";
function ImageUploader() {
const handleImagesChange = (images) => {
// Handle the updated images here
console.log("Updated images:", images);
};
return (
<div>
<ImageUploaderComponent
id="fkjdlfj"
onImagesChange={handleImagesChange}
maxImages={5} // Optional: Maximum number of images allowed
maxFileSize={1024} // Optional: Maximum file size in KB
validTypes={["image/jpeg", "image/png", "image/webp", "image/gif"]} // Optional: Valid file types
loadedImages={["https://news.ubc.ca/wp-content/uploads/2023/08/AdobeStock_559145847.jpeg"]} // to load the image urls at the initial loading helps while updating the images so that you can fetch and provide the links to display those images
/>
</div>
);
}
export default ImageUploader;Usage in standard HTML/Javasctipt or any js environment
Make sure to import css and image uploader form the package
<body>
<div id="image-uploader-container"></div>
<script>
const handleImagesChange = (images) => {
console.log("Updated images:", images);
};
const uploader = new ImageUploader({
containerId: 'image-uploader-container',
maxImages: 5,
maxFileSize: 1024,
validTypes: ["image/jpeg", "image/png", "image/webp", "image/gif"],
onImagesChange: handleImagesChange,
loadedImages=["https://news.ubc.ca/wp-content/uploads/2023/08/AdobeStock_559145847.jpeg"]
});
</script>
</body>Props
| Prop | Type | Required | Default Value | Description |
| ---------------- | ---------- | -------- | ------------- | ------------------------------------------------------------------------- |
| id | string | Yes | - | A unique ID for the component's container. |
| maxImages | number | No | -1 | The maximum number of images that can be uploaded. |
| maxFileSize | number | No | -1 | The maximum file size (in KB) for uploaded images. |
| validTypes | array | No | Default types | An array of valid MIME types for uploaded images. |
| onImagesChange | function | No | - | Callback function that receives the updated images when the list changes. |
| loadedImages | array | No | - | An array of image links
Additional Information
maxImages: If set to-1, there is no limit on the number of images that can be uploaded.maxFileSize: If set to-1, there is no limit on the file size of uploaded images.validTypes: This allows you to specify which types of images are accepted during the upload process.
Editor
The text editor component offers a smooth and intuitive experience for creating and editing content, with automatic text-to-HTML conversion. It supports rich formatting options such as bold, italics, lists, and links, with real-time HTML preview. The editor is fully responsive and designed for easy integration into both React and standard HTML/JavaScript environments. Its customizable toolbar and clean, minimalistic interface make it an efficient and user-friendly solution for any web application requiring rich text editing and seamless HTML conversion.
Contributing
We welcome contributions! Please see our CONTRIBUTING.md for guidelines.
License
This project is licensed under the MIT License.