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 atsrc/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
andsrc/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 preservenpm 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