What's Changed

• Fix React Router Framework Support by @0ctan33 in https://github.com/enszrlu/NextStep/pull/14
• add disableConsoleLogs by @enszrlu in https://github.com/enszrlu/NextStep/pull/22
• add noInViewScroll to NextStep props by @enszrlu in https://github.com/enszrlu/NextStep/pull/23
• 250223 back version compability by @enszrlu in https://github.com/enszrlu/NextStep/pull/26
• 241219 support other react libraries by @enszrlu in https://github.com/enszrlu/NextStep/pull/27

New Contributors

• @0ctan33 made their first contribution in https://github.com/enszrlu/NextStep/pull/14

Full Changelog: https://github.com/enszrlu/NextStep/compare/v.1.3.0...v.2.0.0

NextStep v2.0: Framework-Agnostic Onboarding Library

Overview

This PR transforms NextStep from a Next.js-specific library to a framework-agnostic React onboarding solution with support for Next.js, React Router, and Remix through a flexible adapter system.

Key Changes

1. Framework Agnostic Architecture

• Navigation Adapters for multiple frameworks:
  • Next.js (default)
  • React Router
  • Remix
  • Window-based navigation
  • Custom adapters
• New Components:
  • NextStepReact: Framework-agnostic version
  • NextStep: Next.js-specific wrapper (maintains backward compatibility)

2. Dependency Changes

• Replaced framer-motion with motion
• Made framework dependencies optional

3. Enhanced Features

• Improved positioning logic for scrollable containers
• Performance optimizations
• New configuration options:
  • disableConsoleLogs
  • scrollToTop
  • noInViewScroll

Breaking Changes

1. Dependency Change: framer-motion → motion
2. Import Path Changes for Adapters
3. Component Usage for Non-Next.js Projects

Migration Guide

For Next.js Users

No changes required for basic usage:

<NextStepProvider>
  <NextStep steps={steps}>{children}</NextStep>
</NextStepProvider>

For React Router / Remix Users

// 1. Install: npm i nextstepjs motion

// 2. Import adapter
import { useReactRouterAdapter } from 'nextstepjs/adapters/react-router';
// or
import { useRemixAdapter } from 'nextstepjs/adapters/remix';

// 3. Use NextStepReact with adapter
<NextStepProvider>
  <NextStepReact navigationAdapter={useReactRouterAdapter} steps={steps}>
    {children}
  </NextStepReact>
</NextStepProvider>

For Vite Users

// vite.config.ts
export default defineConfig({
  ssr: {
    noExternal: ['nextstepjs', 'motion'],
  },
});

Testing

• Verified with Next.js 14, React Router 7, and Remix 2.0
• Confirmed backward compatibility with v1 implementations