sentimex-sdk

📦 sentimex-sdk A drop-in React component SDK for displaying live, categorized X/Twitter feeds in your app or terminal. Ships with a high-level wrapper plus low-level & utilities.

Features 🔌 Plug-and-play: one import, one JSX tag

🗂️ Category toggle between “custom” & “trader” streams

♻️ Infinite & virtualized scrolling

🎨 Fully themable via Tailwind-style classes

🛠️ Low-level access to + parsing helpers

📦 Published as a lightweight ES module + TypeScript types

Installation npm install sentimex-sdk react react-dom @tanstack/react-query

or

yarn add sentimex-sdk react react-dom @tanstack/react-query Peer dependencies • React ≥18 • React-DOM ≥18 • @tanstack/react-query ≥4

Quickstart

import React from 'react' import { createRoot } from 'react-dom/client' import { SentimexClient } from 'sentimex-sdk'

function App() { return ( <SentimexClient userID="123456789" token="YOUR_X_BEARER_TOKEN" parseTweet={raw => {/* your parsing logic or use the built-in helper */}} initialCategory="custom" containerClassName="h-full bg-gray-900 text-white" toggleButtonClass="px-3 py-1 rounded border" activeButtonClass="bg-indigo-500 text-white" /> ) }

createRoot(document.getElementById('root')!).render() API High-level wrapper—handles conversation, streaming, pagination & UI for you.

Props

Name Type Default Description userID string — X user ID whose feed you want to display token string — Bearer auth token for X/Twitter API parseTweet (raw: any) => ParsedTweet — Function to normalize raw tweet JSON initialCategory 'custom' | 'trader' "custom" Which category is selected on first render containerClassName string "" Tailwind CSS classes for main container toggleButtonClass string … Base classes for category toggle buttons activeButtonClass string … Additional classes for the active toggle …plus all props

Lower-level component for full customization. See props in your editor or docs link.

Utilities

import { parseTweet } from 'sentimex-sdk'

// e.g. const clean = parseTweet(rawEventFromX) Theming & Customization All components use Tailwind-style class names. You can override:

Colors, spacing, layout via containerClassName, toggleButtonClass, activeButtonClass, etc.

Supply your own modal via ModalComponent={MyModal}.

Customize badge appearance through badgeProps.

Development & Demo

git clone https://github.com/sentimex-ai/sdk-implementation.git cd sentimex-sdk npm install npm run dev

View the demo at http://localhost:5173

License MIT © Sentimex