Why Choose USStateFlags?
Built by developers, for developers. Now with crisp SVG flags that scale perfectly at any size.
Lightning Fast
Optimized bundle size with tree shaking support. Only load what you need.
Crisp SVG Flags
Vector-based flags that look perfect at any size, from tiny icons to large displays.
Rock Solid
Built-in error handling, prop validation, and TypeScript support.
Highly Customizable
15+ props for complete control over appearance and behavior.
Live Examples
Interactive demos showing the full power and flexibility of USStateFlags with crisp SVG flags
Complete API Reference
Every prop, every option, every possibility documented in detail
| Property | Description | Type | Default |
|---|---|---|---|
| state required | State abbreviation ("TX") or full name ("Texas") | string | — |
| showFlag | Whether to display the state flag image (SVG format) | boolean | false |
| showName | Whether to display the full state name | boolean | false |
| showAbbreviation | Whether to display the state abbreviation badge | boolean | false |
| showCapital | Whether to display the state capital city | boolean | false |
| flagSize | Size of the SVG flag (affects width/height via CSS) | 'xs' | 'sm' | 'md' | 'lg' | 'md' |
| flagAlt | Custom alt text for the flag image (accessibility) | string | "{state.name} flag" |
| layout | Layout direction of the component elements | 'horizontal' | 'vertical' | 'horizontal' |
| className | Additional CSS class name(s) for custom styling | string | '' |
| style | Inline styles for the main container element | CSSProperties | {} |
| nameStyle | Inline styles specifically for the state name text | CSSProperties | {} |
| abbreviationStyle | Inline styles specifically for the abbreviation badge | CSSProperties | {} |
| capitalStyle | Inline styles specifically for the capital city text | CSSProperties | {} |
| onClick | Click event handler that receives the full state data object | (stateData: StateData) => void | — |
| onFlagLoad | Callback fired when the SVG flag successfully loads | () => void | — |
| onFlagError | Callback fired when the SVG flag fails to load | () => void | — |