Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
react-cloud-letter
Advanced tools
Wrap your letter in lovely cloud-like shape with React.
Weekly downloads
Readme
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
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>
)
}
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 |
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
FAQs
Wrap your letter in lovely cloud-like shape with React.
The npm package react-cloud-letter receives a total of 1 weekly downloads. As such, react-cloud-letter popularity was classified as not popular.
We found that react-cloud-letter demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.