v0.0.4-beta.1

A small component for displaying different data based on user scroll and pointer position.

This component is particularly useful for creating dynamic and interactive interfaces, where the user's actions trigger changes in the displayed content. For example, imagine a website where the user can scroll through a list of products, and as they hover over each product, more details about it are displayed.

Arie is built using event listeners to track the user's scroll and pointer position, and then update the component's state accordingly. Arie's string renders other unique elements giving a simple and modern look.

You can view the source code for this project on GitHub

Installation

yarn add arie-js

pnpm install --save arie-js

npm install --save arie-js

Usage

Default Arie

import React from 'react';
import { useArie } from 'arie-js';
 
export const DefaultExample = () => {
  const {
    position: { client },
  } = useArie();
  return (
    <>
      <div>
        <div>X.{client.x && client.x.toExponential(2)}</div>
        <div>Y.{client.y && client.y.toPrecision(6)}</div>
      </div>
    </>
  );
};

Arie Angle

import React from 'react';
import { useArie } from 'arie-js';
 
export const AngleExample = () => {
  const {
    selectedElement: {
      position: { angle },
    },
  } = useArie(true, 'trackElement');
 
  return (
    <>
      <div className='row'>
        {angle ? <div>{angle.toFixed(0)}°</div> : <div>0°</div>}
      </div>
 
      <div id='trackElement' />
    </>
  );
};

A type-check script is also added to package.json, which runs TypeScript's

tsc-cli in noEmit mode to run type-checking separately. You can then include this, for example, in your test scripts.

© MIT Chandler Chappell, 2023