AudienceSelector
Location: src/components/AudienceSelector.jsx
Overview
AudienceSelector lets users control who can see their post. It provides three audience levels: public (anyone), friends (mutual friends only), and circles (specific named groups). When "Circles" is selected, a secondary dropdown appears for choosing which circles to share with.
Selected circles are displayed as removable pill badges below the selector. The component integrates with the useCircles hook to fetch the user's circles.
Relevant Invariants
- Invariant #7: "Human-Scale Social Contexts" -- Circle-based sharing keeps posts within small, intentional groups.
- Invariant #18: "Defaults Are Moral Decisions" -- Public is the initial option, ensuring intentional visibility choices.
Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
audience | string | Yes | -- | Current audience: 'public', 'friends', or 'circles' |
onAudienceChange | function | Yes | -- | Callback when the audience type changes |
selectedCircleIds | array | Yes | -- | Array of selected circle IDs (for circle audience) |
onCirclesChange | function | Yes | -- | Callback when selected circles change |
compact | boolean | No | false | When true, hides the audience description text below |
Audience Options
| ID | Label | Icon | Description |
|---|---|---|---|
public | Public | Globe | Anyone can see this post |
friends | Friends | Users | Only your friends can see this |
circles | Circles | Lock | Only selected circles can see this |
Key Behaviors
- Dropdown Toggle: Clicking the trigger button opens/closes the audience dropdown.
- Circle Selector: Selecting "Circles" opens a secondary checkbox list of the user's circles. Each circle shows its member count.
- Circle Pills: Selected circles appear as removable pill badges. Removing all circles switches back to public audience.
- Empty Circle State: If the user has no circles, an informative message is shown instead of the checkbox list.
- Click Outside: Both dropdowns close when clicking outside the
.audience-selectorcontainer. - Compact Mode: When
compactis true, the description paragraph below the selector is hidden.
Usage
import AudienceSelector from '@/components/AudienceSelector';
const [audience, setAudience] = useState('public');
const [circleIds, setCircleIds] = useState([]);
<AudienceSelector
audience={audience}
onAudienceChange={setAudience}
selectedCircleIds={circleIds}
onCirclesChange={setCircleIds}
/>
Related
- CreatePost -- Uses AudienceSelector in the post creation flow
- AdvancedComposer -- Uses AudienceSelector in the advanced editor
Last updated: 2026-02-07