react-cloud-letter
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.
Installation
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 (
<CloudLetter
width={Math.min(window.innerWidth * 0.8, 512)}
spaceWidth={1}
cloudHeight={32}
font={{ family: "Verdana" }}
mode="PARTIAL"
snap={4}
fill="#dfe"
>
{content}
</CloudLetter>
)
}
Types
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"
Interface
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 |
ChangeLog
0.2.5 — fix: avoid grid on zero-length cloudRects