Skip to main content

README

Interfaces​

BulmaClassesProps​

Props for applying Bulma helper classes to components.

Properties​

PropertyTypeDescription
alignContent?"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch"Align content (e.g., 'center', 'stretch').
alignItems?"flex-start" | "flex-end" | "center" | "start" | "end" | "stretch" | "baseline"Align items (e.g., 'center', 'flex-start').
alignSelf?"auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"Align self (e.g., 'auto', 'center').
backgroundColor?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Background color class (e.g., 'primary', 'info').
color?"primary" | "link" | "info" | "success" | "warning" | "danger" | "black" | "black-bis" | "black-ter" | "grey-darker" | "grey-dark" | "grey" | "grey-light" | "grey-lighter" | "white" | "light" | "dark" | "inherit" | "current"Text color class (e.g., 'primary', 'info').
colorShade?"00" | "05" | "10" | "15" | "20" | "25" | "30" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "invert"Color shade suffix (e.g., '00', 'invert').
display?"block" | "flex" | "inline" | "inline-block" | "inline-flex"Display type (e.g., 'block', 'flex').
flexDirection?"row" | "row-reverse" | "column" | "column-reverse"Flex direction (e.g., 'row', 'column').
flexGrow?"0" | "1"Flex grow value (e.g., '0', '1').
flexShrink?"0" | "1"Flex shrink value (e.g., '0', '1').
flexWrap?"nowrap" | "wrap" | "wrap-reverse"Flex wrap (e.g., 'wrap', 'nowrap').
float?"left" | "right"Float direction (e.g., 'left', 'right').
fontFamily?"primary" | "sans-serif" | "monospace" | "secondary" | "code"Font family (e.g., 'sans-serif', 'code').
interaction?"unselectable" | "clickable"Interaction behavior (e.g., 'unselectable', 'clickable').
justifyContent?"left" | "right" | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end"Justify content (e.g., 'center', 'space-between').
m?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin (e.g., '0', '1').
mb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin bottom.
ml?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin left.
mr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin right.
mt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin top.
mx?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin horizontal (left and right).
my?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Margin vertical (top and bottom).
overflow?"clipped"Overflow behavior (e.g., 'clipped').
overlay?booleanApplies overlay styling if true.
p?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding (e.g., '0', '1').
pb?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding bottom.
pl?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding left.
pr?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding right.
pt?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding top.
px?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding horizontal (left and right).
py?"0" | "1" | "2" | "3" | "4" | "5" | "6" | "auto"Padding vertical (top and bottom).
radius?"radiusless"Border radius style (e.g., 'radiusless').
responsive?"mobile" | "narrow"Responsive behavior (e.g., 'mobile', 'narrow').
shadow?"shadowless"Shadow style (e.g., 'shadowless').
textAlign?"centered" | "justified" | "left" | "right"Text alignment (e.g., 'centered', 'left').
textSize?"1" | "2" | "3" | "4" | "5" | "6" | "7"Text size (e.g., '1', '2').
textTransform?"capitalized" | "lowercase" | "uppercase" | "italic"Text transformation (e.g., 'uppercase', 'italic').
textWeight?"light" | "normal" | "medium" | "semibold" | "bold"Text weight (e.g., 'light', 'bold').
viewport?"mobile" | "tablet" | "desktop" | "widescreen" | "fullhd"Viewport for responsive classes (e.g., 'mobile', 'desktop').
visibility?"hidden" | "sr-only"Visibility (e.g., 'hidden', 'sr-only').

Variables​

validAlignContents​

const validAlignContents: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch"]

Valid Bulma align-content classes.

Example​

'flex-start', 'center', 'stretch'

validAlignItems​

const validAlignItems: readonly ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end"]

Valid Bulma align-items classes.

Example​

'stretch', 'flex-start', 'center'

validAlignments​

const validAlignments: readonly ["centered", "justified", "left", "right"]

Valid Bulma text alignment classes.

Example​

'centered', 'left', 'right'

validAlignSelfs​

const validAlignSelfs: readonly ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"]

Valid Bulma align-self classes.

Example​

'auto', 'flex-start', 'center'

validColors​

const validColors: readonly ["primary", "link", "info", "success", "warning", "danger", "black", "black-bis", "black-ter", "grey-darker", "grey-dark", "grey", "grey-light", "grey-lighter", "white", "light", "dark"]

Valid Bulma color classes.

Example​

'primary', 'link', 'info'

validColorShades​

const validColorShades: readonly ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55", "60", "65", "70", "75", "80", "85", "90", "95", "invert"]

Valid Bulma color shade suffixes.

Example​

'00', '05', 'invert'

validDisplays​

const validDisplays: readonly ["block", "flex", "inline", "inline-block", "inline-flex"]

Valid Bulma display classes.

Example​

'block', 'flex', 'inline'

validFlexDirections​

const validFlexDirections: readonly ["row", "row-reverse", "column", "column-reverse"]

Valid Bulma flex direction classes.

Example​

'row', 'column', 'row-reverse'

validFlexGrowShrink​

const validFlexGrowShrink: readonly ["0", "1"]

Valid Bulma flex grow and shrink values.

Example​

'0', '1'

validFlexWraps​

const validFlexWraps: readonly ["nowrap", "wrap", "wrap-reverse"]

Valid Bulma flex wrap classes.

Example​

'nowrap', 'wrap', 'wrap-reverse'

validFontFamilies​

const validFontFamilies: readonly ["sans-serif", "monospace", "primary", "secondary", "code"]

Valid Bulma font family classes.

Example​

'sans-serif', 'monospace', 'code'

validJustifyContents​

const validJustifyContents: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "start", "end", "left", "right"]

Valid Bulma justify-content classes.

Example​

'flex-start', 'center', 'space-between'

validSizes​

const validSizes: readonly ["0", "1", "2", "3", "4", "5", "6", "auto"]

Valid Bulma size classes for margins and paddings.

Example​

'0', '1', 'auto'

validTextSizes​

const validTextSizes: readonly ["1", "2", "3", "4", "5", "6", "7"]

Valid Bulma text size classes.

Example​

'1', '2', '3'

validTextTransforms​

const validTextTransforms: readonly ["capitalized", "lowercase", "uppercase", "italic"]

Valid Bulma text transformation classes.

Example​

'capitalized', 'uppercase', 'italic'

validTextWeights​

const validTextWeights: readonly ["light", "normal", "medium", "semibold", "bold"]

Valid Bulma text weight classes.

Example​

'light', 'normal', 'bold'

validViewports​

const validViewports: readonly ["mobile", "tablet", "desktop", "widescreen", "fullhd"]

Valid Bulma viewport classes for responsive design.

Example​

'mobile', 'tablet', 'desktop'

validVisibilities​

const validVisibilities: readonly ["hidden", "sr-only"]

Valid Bulma visibility classes.

Example​

'hidden', 'sr-only'

Functions​

useBulmaClasses()​

useBulmaClasses<T>(props): object

A hook that generates Bulma helper classes from props and separates unhandled props.

useBulmaClasses

Type Parameters​

T​

T extends Record<string, unknown>

Parameters​

props​

BulmaClassesProps & T

Combination of BulmaClassesProps and additional props.

Returns​

object

An object containing the Bulma helper classes and unhandled props.

bulmaHelperClasses​

bulmaHelperClasses: string

rest​

rest: Omit<T, keyof BulmaClassesProps>

Example​

const { bulmaHelperClasses, rest } = useBulmaClasses({
  color: 'primary',
  textSize: '3',
  className: 'custom-class'
});
// bulmaHelperClasses: 'has-text-primary is-size-3'
// rest: { className: 'custom-class' }