@rossrobino/components

• MIT License
• GitHub
• npm

Install

npm install -D @rossrobino/components

Components

• Chord
• Editor
• FullscreenButton
• ShareButton
• YouTube

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

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

• md.robino.dev

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

Enable 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

Share

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

• Blog post

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