Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sharks-interactive/simple-components
📇 A vanilla js library for simple replication of templates, or 'components'.
https://github.com/sharks-interactive/simple-components
component html javascript javascript-library library vanilla-javascript
Last synced: 6 days ago
JSON representation
📇 A vanilla js library for simple replication of templates, or 'components'.
- Host: GitHub
- URL: https://github.com/sharks-interactive/simple-components
- Owner: Sharks-Interactive
- License: isc
- Created: 2021-08-22T21:07:54.000Z (about 3 years ago)
- Default Branch: prod
- Last Pushed: 2022-11-08T02:14:33.000Z (about 2 years ago)
- Last Synced: 2024-10-04T11:04:27.781Z (about 1 month ago)
- Topics: component, html, javascript, javascript-library, library, vanilla-javascript
- Language: JavaScript
- Homepage:
- Size: 118 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Simple Components
**Simple Components** is a lightweight vanilla javascript component framework.
## Functionality
- Easily **replicate** individual html components with custom data
- Easy **bulk** rendering of components
- Supports **custom props** for all your components
- **Supports conditional rendering**, for hiding portions of a component based on conditions
- **Supports inline script tags** and modules
## Usage:
```
https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components
```
## Quick Examples:
#### Rendering individual comps (w/ props & promise)
```js
import { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';
const sc = new SimpleComps('relative/path/to/components/');
window.onload = sc.render('welcome-msg').then(() => {
// Called when the comp finishes rendering in case you need to access it
console.log('Done rendering');
});
/// In another file at
// /relative/path/to/components/welcome-msg.html:
// In index.html or whatever else file is using this component:
```
### Rendering Multiple
```js
// 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
import { SimpleComps } from 'https://www.jsdelivr.com/package/npm/@sharks-interactive/simple-components';
const sc = new SimpleComps('relative/path/to/components/');
// Create a new object containing a list of objects contaning a list of attributes each component should use
// Populate this via code for search results, tweets or whatever else you need
let dataObj = {
l: [
{ attrs: ['propName|propValue', 'resultName|https://dogs.com'] }, // Javascript object for each comp's attrs
{ attrs: ['propName|propValue', 'resultName|https://cats.com'] }
]
}
sc.create('result-card', 2 /* Num of comps to create */, myContainer /* Parent obj */, dataObj /* Comp data */);
sc.render('result-card'); // Renders all the comps we just created in the DOM
///
/// In the result-card.html comp file:
///
{resultName}
```
## Features:
- **.create()** creates multiple comps with specified props in the DOM
- **.render()** renders all of a specific comp
- **``, <style>``** inline script and style tags supported
- **if="false"** conditional rendering of elements
- **{propName}** supports all kinds of custom props, even in your ``<script>``
- **Promise-based** supports a promise for running code when a comp is finished rendering
- **Custom HTML elements** supports the (appearance) of custom HTML elements
- **``<script type="module">``** supports javascript modules
## Options (Required)
| Option | Type | Description |
| ------ | ---- | ----------- |
| folder | string | A string containing the path to your components, relative to the script calling it. |
## How it works:
This component library is a easy way to render html files.
In the background it loads your component files over https, parses props, ifs, and ``<script>`` tags, and then inserts them into the HTML DOM.
**Read the wiki for extra documentation.**
Project created and maintained by Sharks Interactive.
### Developing:
- Commit to ``staging`` and pr to ``prod`` for changes
### Code Style:
- Continious Integration will handle formatting for you
- Use ESLINT locally to catch errors pre-pr
## Acknowledgements:
**README.MD styling, practices etc, modelled after and taken from the excellent [Toucan-JS](https://github.com/robertcepa/toucan-js)**