@finsignal/feed-integration

Standalone npm пакет для встраивания новостной ленты FinSignal в другие проекты.

Возможности

• 📰 Полнофункциональная новостная лента с различными типами контента
• 🔄 Segment control для переключения между типами ленты (Discovery, Hot, Portfolio)
• ♾️ Infinite scroll с автоматической подгрузкой
• 💅 Поддержка различных типов сниппетов (новости, сигналы, стратегии, триггеры, market vibe, guides)
• 📱 Кроссплатформенность (React Native + Web через Solito)
• ⚡ Оптимизированная производительность с кэшированием
• 🎨 Кастомизируемый внешний вид

Установка

npm install @finsignal/feed-integration
# или
yarn add @finsignal/feed-integration

Базовое использование

import { NewsFeedWidget } from '@finsignal/feed-integration';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NewsFeedWidget
        initialFeedType="discovery"
        onItemPress={(item) => {
          console.log('Clicked on:', item);
        }}
      />
    </QueryClientProvider>
  );
}

API

NewsFeedWidget Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | initialFeedType | 'discovery' \| 'hot' \| 'portfolio' | 'discovery' | Начальный тип фида | | onItemPress | (item: FeedItem) => void | - | Обработчик клика на элемент | | renderItem | (item: FeedItem, index: number) => ReactNode | - | Кастомный рендер элемента | | style | ViewStyle | - | Кастомные стили контейнера |

Компоненты

Помимо главного виджета, пакет экспортирует компоненты для более гибкой кастомизации:

• FeedList - список с infinite scroll
• Snippet - компонент карточки новости
• SegmentControl - переключатель типов ленты

Хуки

Для работы с данными напрямую:

• useInfiniteFeed(feedType) - infinite scroll хук
• useFeed(params) - базовый хук для получения фида
• useTrendingFeed(params) - трендовый фид
• usePersonalFeed(params) - персональный фид
• useHotFeed() - hot фид с авто-обновлением

Типы

import type { 
  FeedItem, 
  FeedResponse, 
  FeedRequest,
  FeedType 
} from '@finsignal/feed-integration';

Кастомизация

Кастомный рендер элементов

<NewsFeedWidget
  renderItem={(item, index) => (
    <CustomCard item={item} index={index} />
  )}
/>

Использование компонентов отдельно

import { FeedList, Snippet, SegmentControl } from '@finsignal/feed-integration';

function CustomFeed() {
  const [feedType, setFeedType] = useState('discovery');
  
  return (
    <>
      <SegmentControl
        options={[
          { value: 'discovery', label: 'Discovery' },
          { value: 'hot', label: 'Hot' }
        ]}
        value={feedType}
        onValueChange={setFeedType}
      />
      <FeedList
        feedType={feedType}
        renderItem={(item) => <Snippet {...item} />}
      />
    </>
  );
}

Требования

• React 18+
• React Native 0.70+
• @tanstack/react-query 5+

Лицензия

MIT