@ecohead/kondonizer
Advanced tools
🗂 A universal media library web component based on the Custom Elements standard.
Kondonizer is a custom element (a native HTML tag) that can be integrated in any frontend code. It displays a media library based on a Media model, like WordPress does internally. You can select, upload, edit and delete one or multiple files, all based on a configuration object highly customizable.
This web component needs between 2 and 5 API endpoints to be fully working. More info in the documentation.
The full documentation is accessible in a dedicated website.
You can use your preferred package manager.
npm install @ecohead/kondonizer --save
yarn add @ecohead/kondonizer --save
pnpm install @ecohead/kondonizer --save
The first step is to place the HTML tag where you need it in your template :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- Calls the custom-element -->
<eco-kondonizer></eco-kondonizer>
</body>
</html>
At this point, you will see any changes, because you need to create an instance of kondonizer to actually display the component UI.
The eco-kondonizer custom element provide a method to create a new instance with some options. To display the component UI, you need to create a new instance as follows :
// At the top of the file
import { EcoKondonizer, defineConfig } from "@ecohead/kondonizer";
// Anywhere in the same file
const kondonizer = document.querySelector('eco-kondonizer');
if (!kondonizer) return;
kondonizer.createInstance({
// Create default options, but necessary to be customized
config: defineConfig(),
// Pass [] to no existing selection, or an array of ids (e.g. [12,28,46])
selectedMedias: [],
// Defaults to 'en-US'
defaultLang: 'fr-FR'
});
Note All the options available are listed here.
Warning Some config options are required (e.g. server endpoints), so you need to pass a correct config to view the component UI.
A CustomEvent is emitted each time the user clicks on the confirm button in the modal. So, to get the user selection, you have to listen to this event as follows :
kondonizer.addEventListener('kondoupdate', (e) => {
console.log(e.detail)
});
/**
* Outputs :
* {
* identifier: 'some-uuid', // Unique identifier of the instance
* selection: [12,24] // All media ids selected in the modal
* }
*/
You now have a fully functional web component that you can integrate in any of your templates.
If you need more details in the integration in the most popular front-end frameworks and libraries, see Integrate with front-end frameworks.
You can also have a working demo on the documentation website.
This library is MIT licensed.
FAQs
🗂 A universal media library web component based on the Custom Elements standard.
We found that @ecohead/kondonizer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket detected malicious node-ipc versions with obfuscated stealer/backdoor behavior in a developing npm supply chain attack.
Security News
TeamPCP and BreachForums are promoting a Shai-Hulud supply chain attack contest with a $1,000 prize for the biggest package compromise.
Security News
Packagist urges PHP projects to update Composer after a GitHub token format change exposed some GitHub Actions tokens in CI logs.