@winnies0728/orange-component v1.0.2

orange-component

• web component
• support typescript
• custom some style (can override default setting by define root variants)

Installation

• npm package

npm i @winnies0728/orange-component

• cdn

<script
  type="module"
  src="https://www.unpkg.com/@winnies0728/orange-component@latest/dist/index.global.js"
></script>

Usage

scroll to top button

• html

<scroll-to-top />

• react

// main.tsx
import '@winnies0728/orange-component'
...

// your component.tsx
export default function App (){
    ...
    return <>
        ...
        <scroll-to-top />
    </>
}

• vue

<template>
  ...
  <scroll-to-top />
</template>

<script>
  ...
  import '@winnies0728/orange-component'
</script>

• custom style (support dark mode)

/* your css file.css */
:root {
    ...
    --scrollToTop-mainColor: #e6e6e6;
    --scrollToTop-bgColor: #666;
    --scrollToTop-borderColor: #666;
}
@media (prefers-color-scheme: light) {
  :root {
    ...
    --scrollToTop-mainColor: #222;
    --scrollToTop-bgColor: #e6e6e6;
    --scrollToTop-borderColor: #e6e6e6;
  }
}