usePostStyle

Location: src/hooks/usePostStyle.js

Overview

Manages style tokens for a post being composed in the Advanced Composer. Provides state management for attaching custom visual styling to posts, with convenience functions to match the user's Homeroom style or clear customization entirely.

Also exports usePostStyleFor() to extract style tokens from an existing post for rendering.

usePostStyle

Signature

function usePostStyle(initialTokens?: object | null): {
  postStyle: object | null,
  setPostStyle: (tokens: object | null) => void,
  matchHomeroom: () => void,
  clearStyle: () => void,
  hasCustomStyle: boolean,
  homeroomStyle: object | null,
}

Parameters

Parameter	Type	Default	Description
initialTokens	object | null	null	Pre-existing tokens for editing a styled post

Return Value

Field	Type	Description
postStyle	object | null	Current style tokens for the post, or null for default styling
setPostStyle	(tokens) => void	Replace style tokens (e.g., from customizer output)
matchHomeroom	() => void	Copy the user's current Homeroom style to the post
clearStyle	() => void	Remove custom styling (sets to null)
hasCustomStyle	boolean	true if the post has custom tokens
homeroomStyle	object | null	The user's saved Homeroom tokens (for comparison or "Match Homeroom" UI)

Usage

import { usePostStyle } from '../hooks/usePostStyle';

function ComposerStyleControls() {
  const { postStyle, setPostStyle, matchHomeroom, clearStyle, hasCustomStyle } = usePostStyle();

  return (
    <div>
      <button onClick={matchHomeroom}>Match My Room</button>
      <button onClick={clearStyle} disabled={!hasCustomStyle}>Clear Style</button>
      <button onClick={() => openCustomizer(postStyle, setPostStyle)}>Customize</button>
    </div>
  );
}

usePostStyleFor

Signature

function usePostStyleFor(post: object | null): object | null

Extracts style_tokens from a post object. Feed the result into useStyleFor() from StyleContext to get computed values for rendering.

Usage

import { usePostStyleFor } from '../hooks/usePostStyle';
import { useStyleFor } from '../contexts/StyleContext';

function StyledPost({ post }) {
  const styleTokens = usePostStyleFor(post);
  const computed = useStyleFor(styleTokens);
  // computed.colors, computed.clipPaths, etc.
}

Dependencies

• useHomeroomStyle — Reads the user's saved Homeroom style for matchHomeroom and homeroomStyle exposure
• StyleContext — usePostStyleFor results are consumed by useStyleFor() for rendering

Related

• useHomeroomStyle — Manages Homeroom style tokens (read/write)
• StyleContext (src/contexts/StyleContext.jsx) — Provides useStyleFor() for computing derived values from tokens