https://github.com/himynameisdave/svelte-copyright

© A Svelte component to format and display a copyright notice.
https://github.com/himynameisdave/svelte-copyright

copyright svelte svelte-component svelte-copyright ui-component

Last synced: 2 months ago
JSON representation

© A Svelte component to format and display a copyright notice.

• Host: GitHub
• URL: https://github.com/himynameisdave/svelte-copyright
• Owner: himynameisdave
• License: mit
• Created: 2020-05-29T18:46:37.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-18T17:50:27.000Z (11 months ago)
• Last Synced: 2024-08-04T01:06:13.262Z (5 months ago)
• Topics: copyright, svelte, svelte-component, svelte-copyright, ui-component
• Language: TypeScript
• Size: 1.41 MB
• Stars: 16
• Watchers: 3
• Forks: 1
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte - svelte-copyright - A Svelte component to format and display a copyright notice. (UI Components / Miscellaneous)

README

        


  
svelte-copyright

  
© A Svelte component to format and display a copyright notice.

  


    

      

    

    

        

    

    

        

    

  



---

A [Svelte](https://svelte.dev/) component to format and display a copyright notice.

[**Try me on CodeSandbox!**](https://codesandbox.io/s/svelte-copyright-x0ibp)

### Installation

This package is available on NPM, and you can install it with `npm` or `yarn`:

```

npm install -D svelte-copyright

yarn add -D svelte-copyright

```

Note that it only needs to be installed as a devDependency, like `svelte` itself.

### Usage

Import the `Copyright` component and use it in your Svelte project.

```svelte

  import Copyright from 'svelte-copyright';

  

    Dave Lunny

  

```

This will output HTML which looks something like this:

```html

  © Copyright 2023 Dave Lunny

```

#### Props

All props are optional (as they all have default values).

**Prop** | **Possible Values** | **Default Value** | **Description**

---|---|---|---

`date` | [RFC2822/ISO8601](https://tools.ietf.org/html/rfc2822#page-14) date string | `new Date()` | Date for the copyright year.

`format` | `'numeric'` \| `'2-digit'` | `'numeric'` | Format for the copyright year.

`position` | `'pre'` \| `'post'`  | `'pre'` | Position of the Copyright relative to the contents you provide.

`showRange` | `true` \| `false`  | `false` | If true, displays a range from the `date` prop to the current year (ie: '2010 - 2020').

**Additional Props**

Note that any additonal props will be spread onto the component. This allows you to do things like provide a custom `class` name to your component.

```svelte

  Dave Lunny

  :global(.custom-copyright) {

    color: lime;

  }

```

### Contributing

Feel free to [file an issue](https://github.com/himynameisdave/svelte-copyright/issues/new) or open a pull request. Ensure that you add tests for any new functionality.

### Inspiration

This was inspired by [`react-copyright`](https://github.com/jasonbellamy/react-copyright) by [Jason Bellamy](https://github.com/jasonbellamy).

---

_✌️ Built by [Dave Lunny](http://himynameisdave.com)._