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

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

Live threaded commenting with avatars, nested replies, votes, and the built-in rich-text composer, plus a dark theme and a live-chat preset (shown here rendered via react-native-web):

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

Темна тема

Живий чат

Редактор багатого тексту

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

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

Віджети

SDK постачається з трьома віджетами, що відповідають Android SDK FastComments:

• 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, скільки коментарів відображати над перемикачем «Показати коментарі».
• 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, etc.
};

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

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

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

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

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

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

Переглядач GIF

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

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

Будь ласка, відкрийте тикет з прикладом для відтворення, включаючи використаний пристрій, якщо ви виявите будь‑які проблеми з продуктивністю. Продуктивність є пріоритетом у всіх бібліотеках FastComments.