Subscribe to Reactive Properties

You can subscribe by detecting only changes in properties instead of events.

You can use reactive properties as a hook.

JavaScript

You need to set the inital state in the HTML attributes.

<div class="container">
  <div class="buttons">
    <button class="prev" disabled>Start</button>
    <button class="next">End</button>
  </div>
  <div class="items horizontal">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
  </div>
</div>

import Conveyer from "@egjs/conveyer";

const conveyer = new Conveyer(".items");

conveyer.subscribe("isReachStart", value => {
  document.querySelector(".prev").disabled = value;
});
conveyer.subscribe("isReachEnd", value => {
  document.querySelector(".next").disabled = value;
});

React

import * as React from "react";
import { useConveyer } from "@egjs/react-conveyer";

export default () => {
  const ref = useRef();
  const { isReachStart, isReachEnd } = useConveyer(ref);

  return <div className="container">
    <div className="buttons">
      <button className="prev" disabled={isReachStart}>Prev</button>
      <button className="next" disabled={isReachEnd}>Next</button>
    </div>
    <div className="items" ref={ref}>
      <div className="item">1</div>
      <div className="item">2</div>
      <div className="item">3</div>
    </div>
  </div>;
};

Vue@2

<template>

<div class="container">
  <button id="prev" :disabled="isReachStart">prev</button>
  <button id="next" :disabled="isReachEnd">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue-conveyer";

export default {
  setup() {
      const { ref, isReachStart, isReachEnd } = useConveyer();
      return {
        ref,
        scrollIntoView,
        isReachStart,
        isReachEnd,
      };
    },
  });
};

Vue@3

<template>

<div class="container">
  <button id="prev" :disabled="isReachStart">prev</button>
  <button id="next" :disabled="isReachEnd">next</button>
  <div class="items" ref="ref">
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
  </div>
</div>

<script>

import { useConveyer } from "@egjs/vue2-conveyer";

export default {
  setup() {
      const { ref, isReachStart, isReachEnd } = useConveyer();
      return {
        ref,
        scrollIntoView,
        isReachStart,
        isReachEnd,
      };
    },
  });
};

Angular

There're few ways to interact with child component in Angular.
See Component Interaction page from Angular official document, and use that to interact with Conveyer.

app.component.html

<div class="container">
  <button id="prev" [disabled]="conveyer?.isReachStart">prev</button>
  <button id="next" [disabled]="conveyer?.isReachEnd">next</button>
  <div
    class="items"
    ngxConveyer
    #conveyer="ngxConveyer"
    >
    <div class="item"><a href="#1">1</a></div>
    <div class="item"><a href="#2">2</a></div>
    <div class="item"><a href="#3">3</a></div>
    <div class="item"><a href="#4">4</a></div>
    <div class="item"><a href="#5">5</a></div>
    <div class="item"><a href="#6">6</a></div>
    <div class="item"><a href="#7">7</a></div>
    <div class="item"><a href="#8">8</a></div>
    <div class="item"><a href="#9">9</a></div>
    <div class="item"><a href="#10">10</a></div>
    <div class="item"><a href="#11">11</a></div>
    <div class="item"><a href="#12">12</a></div>
  </div>
</div>

Svelte

You need to use $-prefix to read reactiver properties in svelte.

https://svelte.dev/docs#component-format-script-4-prefix-stores-with-$-to-access-their-values

<script lang="ts">
  import { useConveyer } from "@egjs/svelte-conveyer";

  const { ref, isReachStart, isReachEnd } = useConveyer();

</script>
<div class="container">
  <div class="buttons">
    <button class="prev" disabled={$isReachStart}>Prev</button>
    <button class="next" disabled={$isReachEnd}>Next</button>
  </div>
  <div class="items" use:ref>
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

See all available events at Conveyer#events.