{"id":19140103,"url":"https://github.com/sharks-interactive/simple-components","last_synced_at":"2026-06-09T20:30:15.415Z","repository":{"id":39621068,"uuid":"398901658","full_name":"Sharks-Interactive/Simple-Components","owner":"Sharks-Interactive","description":"📇 A vanilla js library for simple replication of templates, or 'components'.","archived":false,"fork":false,"pushed_at":"2022-11-08T02:14:33.000Z","size":121,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"prod","last_synced_at":"2025-02-05T09:38:17.193Z","etag":null,"topics":["component","html","javascript","javascript-library","library","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sharks-Interactive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-22T21:07:54.000Z","updated_at":"2023-01-11T03:20:11.000Z","dependencies_parsed_at":"2023-01-21T23:16:07.244Z","dependency_job_id":null,"html_url":"https://github.com/Sharks-Interactive/Simple-Components","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sharks-Interactive%2FSimple-Components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sharks-Interactive%2FSimple-Components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sharks-Interactive%2FSimple-Components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sharks-Interactive%2FSimple-Components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sharks-Interactive","download_url":"https://codeload.github.com/Sharks-Interactive/Simple-Components/tar.gz/refs/heads/prod","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240222507,"owners_count":19767458,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","html","javascript","javascript-library","library","vanilla-javascript"],"created_at":"2024-11-09T07:16:15.121Z","updated_at":"2026-06-09T20:30:15.336Z","avatar_url":"https://github.com/Sharks-Interactive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align='center'\u003e\n  \u003cimg src=\"https://i.imgur.com/OOFSqpg.png\" /\u003e\n\u003c/p\u003e\n\n![npm version](https://img.shields.io/npm/v/@sharks-interactive/simple-components)\n![npm downloads](https://img.shields.io/npm/dm/@sharks-interactive/simple-components)\n\n# Simple Components\n**Simple Components** is a lightweight vanilla javascript component framework.\n\n## Functionality\n- Easily **replicate** individual html components with custom data\n- Easy **bulk** rendering of components\n- Supports **custom props** for all your components\n- **Supports conditional rendering**, for hiding portions of a component based on conditions\n- **Supports inline script tags** and modules\n\n## Usage:\n```\nhttps://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components\n```\n\n## Quick Examples:\n#### Rendering individual comps (w/ props \u0026 promise)\n```js\nimport { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';\nconst sc = new SimpleComps('relative/path/to/components/');\n\nwindow.onload = sc.render('welcome-msg').then(() =\u003e {\n\t// Called when the comp finishes rendering in case you need to access it\n\tconsole.log('Done rendering');\n});\n\n/// In another file at\n// /relative/path/to/components/welcome-msg.html:\n\u003cdiv style=\"background-color: {color};\"\u003e\u003c/div\u003e\n\n// In index.html or whatever else file is using this component:\n\u003cwelcome-msg color=\"red\"\u003e\u003c/welcome-msg\u003e\n```\n\n### Rendering Multiple\n```js\n// By default calling sc.render('comp-name') renders every element of that type in the DOM, but Simple-Components has a utility function for creating multiple in the DOM for rendering\nimport { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';\nconst sc = new SimpleComps('relative/path/to/components/');\n\n// Create a new object containing a list of objects contaning a list of attributes each component should use\n// Populate this via code for search results, tweets or whatever else you need\nlet dataObj = {\n\tl: [\n\t\t{ attrs: ['propName|propValue', 'resultName|https://dogs.com'] }, // Javascript object for each comp's attrs\n\t\t{ attrs: ['propName|propValue', 'resultName|https://cats.com'] }\n\t]\n}\n\nsc.create('result-card', 2 /* Num of comps to create */, myContainer /* Parent obj */, dataObj /* Comp data */);\nsc.render('result-card'); // Renders all the comps we just created in the DOM\n\n///\n/// In the result-card.html comp file:\n///\n\u003cdiv class=\"search-result\"\u003e\n\t\u003ch1\u003e{resultName}\u003c/h1\u003e\n\u003c/div\u003e\n```\n\n## Features:\n- **.create()** creates multiple comps with specified props in the DOM\n- **.render()** renders all of a specific comp\n- **``\u003cscript\u003e, \u003cstyle\u003e``** inline script and style tags supported\n- **if=\"false\"** conditional rendering of elements\n- **{propName}** supports all kinds of custom props, even in your ``\u003cscript\u003e``\n- **Promise-based** supports a promise for running code when a comp is finished rendering\n- **Custom HTML elements** supports the (appearance) of custom HTML elements\n- **``\u003cscript type=\"module\"\u003e``** supports javascript modules\n\n## Options (Required)\n\n| Option | Type | Description |\n| ------ | ---- | ----------- |\n| folder | string | A string containing the path to your components, relative to the script calling it. |\n\n\n## How it works:\nThis component library is a easy way to render html files.\nIn the background it loads your component files over https, parses props, ifs, and ``\u003cscript\u003e`` tags, and then inserts them into the HTML DOM.\n\n**Read the wiki for extra documentation.**\n  \nProject created and maintained by Sharks Interactive.\n  \n### Developing:\n  - Commit to ``staging`` and pr to ``prod`` for changes\n\n### Code Style:\n  - Continious Integration will handle formatting for you\n  - Use ESLINT locally to catch errors pre-pr\n\n## Acknowledgements:\n**README.MD styling, practices etc, modelled after and taken from the excellent [Toucan-JS](https://github.com/robertcepa/toucan-js)**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsharks-interactive%2Fsimple-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsharks-interactive%2Fsimple-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsharks-interactive%2Fsimple-components/lists"}