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.
- Installation
- Components
- Contributing
- License
To install the package, use either npm or yarn:
npm install editorify-devyarn add editorify-devThe 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.
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;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>| 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 |
-
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.
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.
We welcome contributions! Please see our CONTRIBUTING.md for guidelines.
This project is licensed under the MIT License.