@rossrobino/components

Install

npm install -D @rossrobino/components

Components

Chord

Purpose

Generates a guitar chord svg.

Use

<script>
	import { Chord } from "@rossrobino/components";
</script>

<Chord
	class="text-gray-950"
	name="D"
	notes={[
		{
			finger: 0,
			string: 4,
			fret: 0,
		},
		{
			finger: 1,
			string: 3,
			fret: 2,
		},
		{
			finger: 2,
			string: 1,
			fret: 2,
		},
		{
			finger: 3,
			string: 2,
			fret: 3,
		},
	]}
/>

Preview

D 1 2 3 X XD

Props

name purpose type default value
class class string ""
id id string ""
name Name of the chord string ""
notes Notes played for the chord Note[] []
size Size in px number 200
strings Number of strings number 6

Editor

Purpose

Text editor with controls to add elements and keyboard shortcuts.

Use

<script>
	import { Editor } from "@rossrobino/components";
</script>

<Editor
	buttonClass="bg-gray-200 px-2"
	controlsClass="flex gap-2"
	textAreaClass="border w-full h-36 p-2"
	textAreaPlaceholder="asterisk: ctrl+i, anchor: ctrl+["
	contentElements={[
		{
			name: "bullet",
			text: "- ",
			display: "block",
			icon: "Bullet",
		},
		{
			name: "asterisk",
			text: "*",
			display: "wrap",
			icon: "Asterisk",
			key: "i",
		},
		{
			name: "anchor",
			text: "[text](href)",
			display: "inline",
			icon: "Anchor",
			key: "[",
		},
	]}
/>

Preview

Props

name purpose type default value
buttonClass class of the button controls string ""
contentElements Elements to add in the controls ContentElement[] undefined
controlsClass class of the div around the controls string ""
controlsId id of the div around the controls string ""
textAreaValue value of the text area string ""
textAreaPlaceholder placeholder of the text area string ""
textAreaClass class of the text area string ""
textAreaId id of the text area string ""

References

FullscreenButton

Purpose

Make the document or a specific element fullscreen.

Use

<script lang="ts">
	import { FullscreenButton } from "@rossrobino/components";

	let fullscreenDiv: HTMLDivElement;
</script>

<FullscreenButton class="mb-4 bg-gray-200 px-4 py-2" />

<div bind:this={fullscreenDiv} class="bg-gray-800 p-4">
	<div class="mb-2 text-gray-50">Target element fullscreen</div>
	<FullscreenButton targetElement={fullscreenDiv} class="bg-gray-200 px-4 py-2">
		<span slot="enabled">Exit Element Fullscreen</span>
		<span slot="disabled">Enable Element Fullscreen</span>
	</FullscreenButton>
</div>

Preview

Target element fullscreen

Props

name purpose type default value
class class string ""
id id string ""
confirmMesssage Message to display in the confirm popup, set this to empty string "" to disable confirm entirely string ""
targetElement element to make fullscreen HTMLElement document.documentElement

Slots

name purpose default value
enabled content to display when fullscreen is enabled Exit Fullscreen
disabled content to display when fullscreen is disabled Enabled Fullscreen

ShareButton

Purpose

Uses the navigator api to share or copy a url link depending on browser support.

Use

<script>
	import { ShareButton } from "@rossrobino/components";
</script>

<ShareButton
	class="bg-gray-200 px-4 py-2"
	text="Check out this page: "
	title="@rossrobino/components"
	url="https://components.robino.dev"
/>

Preview

Props

name purpose type default value
class class string ""
id id string ""
text Additional text in share message string ""
title title string end of url
url Link to share string ""

Slots

name purpose default value
default default Share
complete displays after copy is complete Copied

References

YouTube

Purpose

Embeds a YouTube video into a website with the video uid, using www.youtube-nocookie.com.

Use

<script>
	import { YouTube } from "@rossrobino/components";
</script>

<YouTube
	class="aspect-video w-full"
	title="Renegade - Kevin Olusola"
	uid="gouiY85kD2o"
/>

Preview

Props

name purpose type default value
autoplay Controls if the video starts playing on load boolean false
class class string ""
id id string ""
start start time (seconds) number 0
title iframe title string ""
uid Unique id found in url of the YouTube video string undefined

Created by Ross Robino