TypeScript icon, indicating that this package has built-in type declarations

0.2.5 • Public • Published



npm version minified size license

React-based, typed component wraps your (whole or certain pieces of) letter in auto-merged cloud-like shape. Created with respect to polygon-clipping implementation of the Martinez-Rueda-Feito polygon clipping algorithm, and with a little help from my round-polygon tool.


by npm:

npm i react-cloud-letter

Example of usage

import { CloudLetter } from "react-cloud-letter"

export const App = () => {
  const content = "The ${origin} of the term ${'cloud'} can be found\nin ${the Old English} words ${clud or clod,} meaning\na ${hill} or a mass of stone."

  return (
      width={Math.min(window.innerWidth * 0.8, 512)}
      font={{ family: "Verdana" }}


the package contains type declarations (.d.ts-files), but in case you would like to be more explicit, import CloudLetterProps in addition

import { CloudLetter, CloudLetterProps } from "react-cloud-letter"


all params are optional

name type default description
children string | JSX.Element null might be a pure string or a string combined with a CloudWord components (description in a mode option)
width number 360 width of the CloudLetter element in px
spaceWidth number 32 width of spaces between words in px
cloudHeight number 32 height of words/spaces/clouds in px
padding number 16 horizontal padding of words/clouds in px
radius number 0.25 ratio to the cloudHeight, expected range is 0 to 0.5
mode "WORD" | "PARTIAL" | "SPACE" "WORD" elements you whant to wrap. "PARTIAL" works with wrapped in ${...} text parts (see example above and demo), alternatively you can wrap text parts in CloudWord components, which you may import in addition to the CloudLetter component
align "left" | "center" | "right" "left" text/clouds horizontal aligning inside the CloudLetter element
snap number 0 will snaps all elements to a grid defined by ratio of cloudHeight / snap if snap > 0
grid boolean false debugger, to see the grid defined by the snap option
fill CSS Color "white" clouds will be filled with color provided
stroke CSS Color "dodgerBlue" color of clouds stroke
strokeWidth number 2 stroke width in px
shadowOffsetX number -3 shadow offset on X-axis in px
shadowOffsetY number 5 shadow offset on Y-axis in px
shadowColor CSS Color stroke color of shadow, by default takes color of stroke option
font object see below an object with font CSS rules

font options

all params are optional

name type default description
color CSS Color stroke text color, by default takes color of stroke option
family string "sans-serif" font-family CSS rule
size number 16 font-size CSS rule in px
style string "none" font-style CSS rule
variant string "none" font-variant CSS rule
weight string "none" font-weight CSS rule
stretch string "normal" font-stretch CSS rule


0.2.5 — fix: avoid grid on zero-length cloudRects


npm i react-cloud-letter

DownloadsWeekly Downloads






Unpacked Size

37.5 kB

Total Files


Last publish


  • foretoo