Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/igorskyflyer/astro-easynav-button

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr 🔼
https://github.com/igorskyflyer/astro-easynav-button

astro back-end button component igorskyflyer javascript js jsx navigation node scroll scrolltotop tsx typescript withastro

Last synced: 3 months ago
JSON representation

🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. Featured on the official Astro integrations page https://astro.build/integrations/?search=igor.dvlpr 🔼

Host: GitHub
URL: https://github.com/igorskyflyer/astro-easynav-button
Owner: igorskyflyer
License: mit
Created: 2024-07-09T17:13:13.000Z (6 months ago)
Default Branch: main
Last Pushed: 2024-07-25T19:16:30.000Z (5 months ago)
Last Synced: 2024-09-27T21:41:00.331Z (3 months ago)
Topics: astro, back-end, button, component, igorskyflyer, javascript, js, jsx, navigation, node, scroll, scrolltotop, tsx, typescript, withastro
Language: Astro
Homepage: https://www.npmjs.com/package/@igor.dvlpr/astro-easynav-button
Size: 567 KB
Stars: 2
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        


  






EasyNav Button (⬆️/⬇️) for Astro 🚀







  🧭 Add an easy-to-use navigational button (jump to top/bottom) to your Astro site. 🔼











  

    


    💖 Support further development

    I work hard for every project, including this one and your support means a lot to me!

    


    Consider buying me a coffee. ☕

    


    Thank you for supporting my efforts! 🙏😊

    


    


    

    


    


    @igorskyflyer

    


    


    


  









## 📃 Table of contents

- [Usage](#-usage)

    - [CSP notice](#csp-notice)

- [API](#-api)

    - [polyfillScroll](#polyfillscroll-boolean)

    - [background](#background-string)

    - [backgroundHover](#backgroundhover-string)

    - [color](#color-string)

    - [colorHover](#colorhover-string)

    - [size](#size-number)

    - [borderRadius](#borderradius-number)

    - [offset](#offset-number)

    - [fontSize](#fontsize-number)

    - [animationTime](#animationtime-string)

    - [iconTop](#icontop-string)

    - [iconBottom](#iconbottom-string)

    - [zIndex](#zindex-number)

    - [position](#position-left--right)

    - [show](#show-always--whenneeded)

- [Examples](#-examples)

- [Changelog](#-changelog)

- [License](#-license)

- [Related](#-related)

- [Author](#-author)







## 🕵🏼 Usage

Install it by executing:

```shell

npm i "@igor.dvlpr/astro-easynav-button"

```




Then import it into your Astro project:




`Layout.astro`

```jsx

import EasyNavButton from '@igor.dvlpr/astro-easynav-button'

{ /* other markup */ }

  

{ /* other markup */ }

```




#### CSP notice

> [!WARNING]

> This Astro component includes its own JavaScript, if you use [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) ![External link](https://raw.githubusercontent.com/igorskyflyer/igorskyflyer/main/assets/external.svg) in your project you need to add its respective integrity hash to the allowed sources list.

>




Inline script SHA-256 hash: `sha256-KWtqqqQFySoITWIucvZhAoWjT2J9jdUA7LfvxyqjJvQ=`







## 🤹🏼 API

This component supports a variety of optional customization and functionality options, listed below:

---

### polyfillScroll: `boolean`

Since the component uses the `scrollend` event for properly adjusting its appearance according to the user scroll action and the given event currently has limited availability (source: [caniuse](https://caniuse.com/mdn-api_document_scrollend_event)) a polyfill is enabled by default, set this property to `false` in order to disable the inclusion of the JavaScript polyfill file.  

The default value is `true`.




> [!TIP]

> The used polyfill was created and is maintained by me as well, it being located:

>

>

> [scrollend-polyfill](https://github.com/igorskyflyer/npm-scrollend-polyfill)




> [!NOTE]

> The polyfill file is minified, served via the jsDelivr CDN and has no side-effects in browsers that already support the `scrollend` event natively.

>




> [!WARNING]

> If you use [CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) ![External link](https://raw.githubusercontent.com/igorskyflyer/igorskyflyer/main/assets/external.svg) in your project you need to add the polyfill's integrity hash to the allowed sources list.

>

---

### background: `string`

Background color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).  

The default value is `'#afc7e5'`.

---

### backgroundHover: `string`

Background color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).  

The default value is `'#3869c2'`.

---

### color: `string`

Foreground color of the button, any valid CSS color (HEX, RGB, RGBA, etc.).

The default value is `'#333333'`.

---

### colorHover: `string`

Foreground color of the button when hovered, any valid CSS color (HEX, RGB, RGBA, etc.).  

The default value is `'#ffffff'`.

---

### size: `number`

Size of the button defined as the number of px.  

The default value is `48`.

---

### borderRadius: `number`

Border radius of the button defined as the number of px.  

The default value is `6`.




> [!TIP]

> Set to `0` to disable round corners.

>

---

### offset: `number`

Offset of the button from the edge of the window defined as the number of px.  

The default value is `10`.

---

### fontSize: `number`

The font size of the button defined as the number of px.  

The default value is `30`.

---

### animationTime: `string`

The duration of the animation when swapping the up/down arrows applied on the button. Can be any valid CSS time value, in msec, sec, etc.  

The default value is `'250ms'`.

---

### iconTop: `string`

A glyph to use as the up arrow icon.  

The default value is `'\25B2'` (U+25B2, ▲).

---

### iconBottom: `string`

A glyph to use as the bottom arrow icon.  

The default value is `'\25BC'` (U+25BC, ▼).

---

### zIndex: `number`

The z-index value for the button. Adjust it only if you have used z-index in your CSS.  

The default value is `999`.

---

### position: `'left' | 'right'`

The horizontal position, either left or right edge of the window.  

The default value is `'right'`.

---

### show: `'always' | 'whenNeeded'`

Defines when to show the button.  

`'always'` will ignore if scrolling is possible (scrollbar visible),  

`'whenNeeded'` will check if scrolling is possible (scrollbar visible) and change the button's visibility based on it.

The default value is `'whenNeeded'`.

---

## ✨ Examples

`index.astro`

```jsx

import EasyNavButton from '@igor.dvlpr/astro-easynav-button'

  

    

  

```

---

## 📝 Changelog

> ✨ Changelog is available here: [CHANGELOG.md](https://github.com/igorskyflyer/astro-easynav-button/blob/main/CHANGELOG.md).

---

## 🪪 License

Licensed under the MIT license which is available here, [MIT license](https://github.com/igorskyflyer/astro-easynav-button/blob/main/LICENSE).

---

## 🧬 Related

[@igor.dvlpr/astro-post-excerpt](https://www.npmjs.com/package/@igor.dvlpr/astro-post-excerpt)

> _⭐ An Astro component that renders post excerpts for your Astro blog - directly from your Markdown and MDX files. Astro v2+ collections are supported as well! 💎_




[@igor.dvlpr/recursive-readdir](https://www.npmjs.com/package/@igor.dvlpr/recursive-readdir)

> _📖 Provides recursive readdir() and readdirSync() functions. 📁_




[@igor.dvlpr/valid-path](https://www.npmjs.com/package/@igor.dvlpr/valid-path)

> _🧰 Provides ways of testing whether a given value can be a valid file/directory name. 🏜_




[@igor.dvlpr/windev](https://www.npmjs.com/package/@igor.dvlpr/windev)

> _🍃 Provides ways of checking whether a path is a legacy Windows device. 💾_




[@igor.dvlpr/extendable-string](https://www.npmjs.com/package/@igor.dvlpr/extendable-string)

> _🦀 ExtendableString allows you to create strings on steroids that have custom transformations applied to them, unlike common, plain strings.. 🪀_

---




### 👨🏻‍💻 Author

Created by **Igor Dimitrijević** ([*@igorskyflyer*](https://github.com/igorskyflyer/)).