@rossrobino/components

Documentation

The purpose of this library is to provide accessible, reusable, unstyled Svelte components for anyone to use. This project can also be forked to easily create your own library and documentation.

Styling

All components have class and id props for reference and styling. Examples are styled with tailwindcss using the class prop, although components are not shipped with any styles.

Install

npm install -D @rossrobino/components

Components

ShareButton

Purpose

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

Usage

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

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

Preview

Props

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

Slots

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

References

YouTube

Purpose

Embed a YouTube video into a website with the video uid.

Usage

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

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

Preview

Props

name purpose type default value
class class string ""
id id string ""
uid Unique id found in url of the YouTube video string ""
title iframe title string ""

Create / Contribute

If you would like to create your own component library with this documentation page or contribute to this project, follow these steps.

  • Fork this repository
  • Add your component to src/lib/svelte
  • Import and add an object documenting your component to the componentList array located at src/routes/docs.ts
  • Test your component by running npm run dev
  • Import component and export from src/lib/index.ts
  • If you are creating your own library, update package.json , README.md and src/docs.ts with your information
  • Since the same project is used for the package and the docs website, npm run packageBuild will build your package to preserve npm run build for easy deployment to services like Vercel and Netlify
  • If you want to contribute to this repo instead of maintaining your own, create a pull request