Using with React / Next.js

React Restriction on Custom Attributes

React (including Next.js) does not allow custom attributes like string="..." or string-id="..." on DOM elements unless they are prefixed with data-. Attempting to use such attributes will result in a warning or stripped attributes in the final HTML.

To ensure full compatibility, string-tune automatically supports both formats:

• Standard usage (e.g., in plain HTML / Vue / Nuxt):

<div string="progress" string-id="intro-1"></div>

• React / Next.js-compatible syntax (use data-string, data-string-id):

<div data-string="progress" data-string-id="intro-1"></div>

Internally, the library first checks for string-* attributes.
If they are not found, it falls back to checking data-string-*.

Using in Next.js Components

Since string-tune works with the DOM directly, you must use it in a client-side component. This ensures the DOM is available for initialization and module mounting.

Example:

'use client';

import { useEffect } from 'react';
import StringTune from '@fiddle-digital/string-tune';

export default function StringTuneInit() {
  useEffect(() => {
    const instance = StringTune.getInstance();
    instance.start(60); // or your preferred FPS
  }, []);

  return null;
}

Installation

npm install string-tune

Summary