@bernierllc/platform-selector-ui

Social media platform selector UI component with multi-select and platform-specific validation feedback.

Features

• Multi-Platform Support: Twitter, LinkedIn, Facebook, Instagram, Mastodon, and Bluesky
• Character Count Validation: Real-time validation against platform-specific character limits
• Multi-Select: Select multiple platforms simultaneously
• Visual Feedback: Clear indication of selected platforms and validation status
• Theming: Support for light and dark themes
• Accessibility: Full keyboard navigation support

Installation

npm install @bernierllc/platform-selector-ui

Peer Dependencies

This package requires the following peer dependencies:

{
  "react": "^18.0.0",
  "react-dom": "^18.0.0",
  "@tamagui/core": "^1.0.0",
  "tamagui": "^1.0.0"
}

Usage

Basic Usage

import React, { useState } from 'react';
import { PlatformSelector } from '@bernierllc/platform-selector-ui';

function MyComponent() {
  const [content, setContent] = useState('');
  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([]);

  return (
    <div>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Enter your content..."
      />
      <PlatformSelector
        content={content}
        selectedPlatforms={selectedPlatforms}
        onSelectionChange={setSelectedPlatforms}
      />
    </div>
  );
}

With Dark Theme

<PlatformSelector
  content={content}
  selectedPlatforms={selectedPlatforms}
  onSelectionChange={setSelectedPlatforms}
  theme="dark"
/>

Without Selection Callback

<PlatformSelector
  content={content}
  selectedPlatforms={['twitter', 'linkedin']}
/>

API

PlatformSelector Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | content | string | Yes | - | The content to validate against platform character limits | | selectedPlatforms | string[] | No | [] | Initially selected platforms | | onSelectionChange | (platforms: string[]) => void | No | - | Callback when platform selection changes | | theme | 'light' \| 'dark' | No | 'light' | Theme for the component |

Platform IDs

The following platform IDs are supported:

• twitter - Twitter (280 characters)
• linkedin - LinkedIn (3000 characters)
• facebook - Facebook (63206 characters)
• instagram - Instagram (2200 characters)
• mastodon - Mastodon (500 characters)
• bluesky - Bluesky (300 characters)

Platform Character Limits

| Platform | Character Limit | |----------|-----------------| | Twitter | 280 | | LinkedIn | 3000 | | Facebook | 63206 | | Instagram | 2200 | | Mastodon | 500 | | Bluesky | 300 |

Types

export interface PlatformSelectorProps {
  content: string;
  selectedPlatforms?: string[];
  onSelectionChange?: (platforms: string[]) => void;
  theme?: 'light' | 'dark';
}

export interface PlatformInfo {
  id: string;
  name: string;
  icon: string;
  maxCharacters: number;
  isValid: boolean;
  validationMessage?: string;
}

export interface ValidationResult {
  isValid: boolean;
  characterCount: number;
  maxCharacters: number;
  message?: string;
}

Examples

Social Media Publishing Form

import React, { useState } from 'react';
import { PlatformSelector } from '@bernierllc/platform-selector-ui';

function SocialPublishingForm() {
  const [content, setContent] = useState('');
  const [selectedPlatforms, setSelectedPlatforms] = useState<string[]>([]);

  const handlePublish = () => {
    console.log('Publishing to:', selectedPlatforms);
    console.log('Content:', content);
  };

  return (
    <div>
      <h1>Publish to Social Media</h1>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="What's on your mind?"
        rows={5}
      />
      <PlatformSelector
        content={content}
        selectedPlatforms={selectedPlatforms}
        onSelectionChange={setSelectedPlatforms}
      />
      <button
        onClick={handlePublish}
        disabled={selectedPlatforms.length === 0}
      >
        Publish
      </button>
    </div>
  );
}

Character Count Monitoring

import React, { useState } from 'react';
import { PlatformSelector } from '@bernierllc/platform-selector-ui';

function CharacterCountMonitor() {
  const [content, setContent] = useState('');

  return (
    <div>
      <input
        type="text"
        value={content}
        onChange={(e) => setContent(e.target.value)}
        placeholder="Type something..."
      />
      <p>Character count: {content.length}</p>
      <PlatformSelector
        content={content}
        selectedPlatforms={['twitter', 'mastodon', 'bluesky']}
      />
    </div>
  );
}

Dependencies

This package uses the following BernierLLC packages for platform constraints:

• @bernierllc/social-media-content-type-twitter
• @bernierllc/social-media-content-type-linkedin
• @bernierllc/social-media-content-type-facebook
• @bernierllc/social-media-content-type-instagram
• @bernierllc/social-media-content-type-mastodon
• @bernierllc/social-media-content-type-bluesky

License

MIT

Copyright

Copyright (c) 2025 Bernier LLC