Додайте коментарі до вашого React Native додатку

Надайте вашому кодовому агенту контекст FastComments, який йому потрібен — віджети, конфігурація, Secure SSO, REST API та SDK:

npx skills add fastcomments/skills

Працює з Claude Code, Codex, Cursor, Copilot, Gemini та будь‑яким іншим агентом, який підтримує skills CLI.

npm install fastcomments-react-native-sdk --save

Живе коментування з гілками, аватарами, вкладеними відповідями, голосами та вбудованим розширеним редактором, а також темна тема та пресет живого чату (тут показано рендеринг через react-native-web):

Живе коментування

Темна тема

Живий чат

Розширений текстовий редактор

Ця бібліотека використовує react-native-enriched для редагування розширеного тексту, що забезпечує потужний WYSIWYG-редактор. Той самий редактор працює на iOS, Android та вебі (через react-native-web), тому редактор поводиться послідовно на всіх платформах з однією реалізацією.

react-native-enriched вимагає React Native New Architecture (Fabric) на нативних платформах (за замовчуванням з RN 0.76, опційно на RN 0.72-0.75), а також бандлера, що підтримує умови exports пакетів. Цей SDK розроблено та протестовано на RN 0.81 / React 19. Той самий редактор також працює в вебі через react-native-web; веб-збірка enriched-редактора досі позначена як експериментальна у вихідному проєкті.

Віджети

SDK містить три віджети, дзеркалячи FastComments Android SDK:

• FastCommentsLiveCommenting - коментування з гілками, голосами, відповідями, пагінацією, згадками, сповіщеннями та живими оновленнями.
• FastCommentsLiveChat - пресет чату на тому самому рушії: хронологічні повідомлення з новими внизу, редактор під списком, жива смуга заголовка (індикатор з'єднання + кількість користувачів), нескінченна історія, що завантажується прокручуванням вгору, автопрокрутка до нових повідомлень, без голосів та гілок відповідей. Кожен пресет можна перевизначити через config.
• FastCommentsFeed - соціальна стрічка з редактором постів, медіа, реакціями, підписками та живими банерами нових постів.

<FastCommentsLiveChat config=\{{ tenantId: 'demo', urlId: 'my-room' }}/>

Теміза

Вигляд за замовчуванням генерується з набору семантичних дизайн-токенів (FastCommentsTheme): кольори, відступи, радіуси, розміри шрифтів, насиченість шрифтів та розміри аватарів. Передайте часткові перевизначення токенів (типізовані FastCommentsThemeOverrides) через проп theme будь-якого віджета, і все дерево стилів буде послідовно переоформлено:

<FastCommentsLiveCommenting config={config} theme=\{{ colors: { primary: '#FF5500' } }}/>

Темний режим — за один набір токенів:

import { getDarkTheme } from 'fastcomments-react-native-sdk';

    <FastCommentsLiveCommenting config={config} theme={getDarkTheme()}/>

Проп styles досі приймає сире дерево IFastCommentsStyles для точкового контролю. Коли надано і theme, і styles, явні стилі мають пріоритет над тематизованим деревом; коли надано лише styles, він повністю замінює значення за замовчуванням (оригінальна поведінка, тож існуючі інтеграції та скіни не постраждають). setupDarkModeSkin застарілий на користь пропа theme.

Опції конфігурації

Ця бібліотека прагне підтримувати всі опції конфігурації, визначені в fastcomments-typescript, так само як веб-реалізація.

Поверх них React Native додає кілька специфічних для SDK опцій через FastCommentsRNConfig:

• hideTopBar - приховати смугу залогіненого користувача / дзвіночка сповіщень над редактором.
• usePressToEdit - натисніть і утримуйте коментар, щоб відкрити його меню.
• disableDownVoting - приховати кнопки голосування проти.
• renderCommentInline - рендерити інформацію про коментатора в тому самому HTML-блоці, що й вміст коментаря.
• renderLikesToRight - перемістити область голосування/лайків праворуч від коментаря замість під ним.
• renderDateBelowComment - рендерити дату під коментарем.
• showLiveStatus - показувати смугу заголовка в стилі чату «Live» + кількість користувачів над коментарями.
• useInlineSubmitButton - рендерити кнопку надсилання як іконку всередині редактора.
• countAboveToggle - з useShowCommentsToggle, скільки коментарів рендериться над перемикачем «Show Comments».
• preserveFeedScrollPosition - FastCommentsFeed запам'ятовує позицію прокручування між размонтуванням/монтуванням (за замовчуванням true).

Концепції FastComments

Основні концепції, які потрібно знати для початку роботи — це tenantId та urlId. tenantId — це ідентифікатор вашого облікового запису FastComments.com. urlId — це те, до чого будуть прив'язані гілки коментарів. Це може бути URL сторінки, ідентифікатор товару, ідентифікатор статті тощо.

Локалізація

Весь текст, видимий користувачам у цих віджетах (назви кнопок, заповнювачі, порожні стани, відносні дати на кшталт «5 хвилин тому», повідомлення про помилки тощо), керується сервером. Компоненти не містять жорстко закодованих англійських рядків; вони рендерять переклади, які FastComments надає для запитаної локалі.

Щоб запросити локаль, встановіть locale у вашій конфігурації:

const config = {
    tenantId: 'your-tenant-id',
    urlId: 'some-page',
    locale: 'de_de', // de_de, fr_fr, ja_jp, es_es тощо.
};

Коли locale не встановлено, FastComments надає мову за замовчуванням для тенанта.

Редагування тексту: переклади керуються у вашій панелі FastComments, а не в цьому SDK. Щоб змінити формулювання, перевизначити текст за замовчуванням або додати мову, відредагуйте переклади для вашого облікового запису в панелі — зміна автоматично підхоплюється віджетами без випуску оновлення застосунку. SDK не містить англійських запасних значень, тож будь-який ключ, який ви очистите в панелі, рендеритиметься порожнім; тримайте ключі заповненими для кожної локалі, яку ви підтримуєте.

Сповіщення користувачів

FastComments підтримує сповіщення для багатьох сценаріїв. Сповіщення налаштовуються, можуть бути вимкнені глобально або на рівні сповіщення/коментаря, і підтримують підписки на рівні сторінки, щоб користувачі могли підписуватися на гілки конкретної сторінки чи статті.

Наприклад, можна використати Secure SSO для автентифікації користувача, а потім періодично опитувати непрочитані сповіщення та доставляти їх користувачу.

Дивіться приклад AppNotificationSecureSSO, щоб дізнатися, як отримувати та обробляти непрочитані сповіщення користувача.

Переглядач GIF

За замовчуванням вибір зображень чи GIF не увімкнено. Дивіться example/src/AppCommentingImageSelection.tsx, щоб дізнатися, як підтримувати завантаження зображень та GIF. У цій бібліотеці є Переглядач GIF, який анонімізує пошук та зображення — вам просто потрібно ним скористатися.

Продуктивність

Якщо ви виявите будь-які проблеми з продуктивністю, будь ласка, відкрийте тікет із прикладом для відтворення, вказавши використаний пристрій. Продуктивність — першокласний пріоритет усіх бібліотек FastComments.