@peerpiper/awesome-peerpiper-components NPM

Awesome PeerPiper Components

Need a start on hacking on the Deploy REPL?

Use these free, open source, and unencrypted components built for being imported into the PeerPiper ecosystem. Build and compile at home or in the Deploy REPL then use via the Gateway in your app.

Reference Implementation

Contact Card. ToDo List

Use

✨ See src/routes/index.svelte for example usage.

In Svelte:

<script>
	import { Peerpiper } from '@peerpiper/awesome-peerpiper-components';

	export let name = 'Douglas Anderson';
	export let address = '247 Main Street, USA';
</script>

<div>
	Demo <pre>awesome-peerpiper-components</pre>
</div>

<Peerpiper.ContactCard>
	<span slot="name">{name}</span>

	<span slot="address">
		{address}
	</span>
</Peerpiper.ContactCard>

In Vanilla JS, import from Github using jsdelivr then mount as per Svelte docs:

import ContactCard from 'https://cdn.jsdelivr.net/gh/PeerPiper/awesome-peerpiper-components@master/dist/@peerpiper/ContactCard.svelte.js';

const app = new ContactCard({
	target: document.getElementById('target-div') || document.body,
	props: {
		// assuming App.svelte contains something like
		// `export let answer`:
		name: 'Doug Anderson',
		address: '247 Main Street USA'
	}
});

<div id="target-div"></div>;