Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-cloud-letter
Advanced tools
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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.