Skip to main content

​
Migrating from npm to CLI

Step-by-step guide to migrate from old npm packages to the new CLI-based components.

​
Why Migrate?

The new CLI approach offers:
  • ✅ Full source code ownership
  • ✅ Unlimited customization
  • ✅ No styleCallbacks complexity
  • ✅ Direct code editing
  • ✅ Better version control
  • ✅ No black-box abstractions

​
Migration Steps

1

Install CLI Components (Side-by-Side)

First, install the CLI version alongside your existing npm package for testing:
npx @replyke/cli init
npx @replyke/cli add comments-threaded
# or
npx @replyke/cli add comments-social
This creates components at src/components/comments-threaded/ without removing your npm package.
2

Update Imports

Change your import statements:Before (npm package):
import { ThreadedCommentSection } from '@replyke/comments-threaded-react-js';
After (CLI component):
import { ThreadedCommentSection } from './components/comments-threaded';
3

Remove styleCallbacks Prop

The CLI components don’t use styleCallbacks. Remove that prop:Before:
<ThreadedCommentSection
  entityId="post_123"
  styleCallbacks={{
    commentContainer: (theme) => ({ backgroundColor: '#F3F4F6' }),
    authorName: (theme) => ({ color: '#2563EB', fontWeight: 'bold' }),
    // ... 50 more callbacks
  }}
/>
After:
<ThreadedCommentSection entityId="post_123" />
4

Apply Customizations in Source Files

Instead of styleCallbacks, edit the source files directly.Example: If you had authorName styling, edit single-comment.tsx:
// File: src/components/comments-threaded/components/single-comment/single-comment.tsx

<span style={{
  color: '#2563EB',      // Your custom color
  fontWeight: 'bold'     // Your custom weight
}}>
  {author.name}
</span>
See Mapping Guide for all callback-to-file mappings.
5

Test Thoroughly

Test the CLI version alongside the npm version to ensure feature parity.
// Temporarily switch between versions for testing
const useNewVersion = true;

{useNewVersion ? (
  <ThreadedCommentSection entityId="post_123" />  // CLI version
) : (
  <OldThreadedCommentSection entityId="post_123" styleCallbacks={...} />  // npm version
)}
6

Uninstall Old Package

Once you’re confident, uninstall the npm package:
npm uninstall @replyke/comments-threaded-react-js
# or
npm uninstall @replyke/comments-social-react-js

​
Complete Example

​
Before (npm package)

import { ThreadedCommentSection } from '@replyke/comments-threaded-react-js';

function BlogPost({ post }) {
  return (
    <>
      <article>{post.content}</article>

      <ThreadedCommentSection
        foreignId={post.id}
        styleCallbacks={{
          commentContainer: (theme) => ({
            backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
            padding: '12px',
            borderRadius: '8px'
          }),
          authorName: (theme) => ({
            color: theme === 'dark' ? '#60A5FA' : '#2563EB',
            fontWeight: 'bold'
          }),
          // ... dozens more callbacks
        }}
      />
    </>
  );
}

​
After (CLI component)

import { ThreadedCommentSection } from './components/comments-threaded';

function BlogPost({ post }) {
  const [isDark, setIsDark] = useState(false);

  return (
    <>
      <article>{post.content}</article>

      <ThreadedCommentSection
        foreignId={post.id}
        theme={isDark ? 'dark' : 'light'}  // Only for inline styles variant
      />
    </>
  );
}
Then customize by editing source files: 
// File: src/components/comments-threaded/components/single-comment/single-comment.tsx

<div style={{
  backgroundColor: theme === 'dark' ? '#1F2937' : '#FFFFFF',
  padding: '12px',
  borderRadius: '8px'
}}>
  <span style={{
    color: theme === 'dark' ? '#60A5FA' : '#2563EB',
    fontWeight: 'bold'
  }}>
    {author.name}
  </span>
  {/* ... */}
</div>

​
Benefits After Migration

Before (npm)After (CLI)
Complex styleCallbacks objectSimple theme prop
Limited to exposed surfacesCustomize anything
Hidden in node_modulesVisible in your repo
Can’t modify layoutEdit JSX directly
Package updates may breakYou control updates

​
Common Issues

You need to manually apply your styleCallbacks customizations to the source files.Use the Mapping Guide to find where each callback maps to.
If you used Tailwind before but CLI installed inline styles (or vice versa), reconfigure:
rm -rf src/components/comments-threaded
# Edit replyke.json: change "style"
npx @replyke/cli add comments-threaded
The CLI components use the same core SDK (@replyke/react-js). No breaking changes there.Only the component API changed (removed styleCallbacks).

​
Next Steps

Mapping Guide

Map styleCallbacks to source files

Migration FAQ

Common migration questions

Customization

Customize your new components

Legacy Docs

View old npm package docs