Socket
Socket
Sign inDemoInstall

react-cloud-letter

Package Overview
Dependencies
9
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cloud-letter

Wrap your letter in lovely cloud-like shape with React.


Version published
Maintainers
1
Weekly downloads
1
decreased by-66.67%

Weekly downloads

Readme

Source

react-cloud-letter

preview

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.


  • No-code demo

  • Codesandbox demo


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

nametypedefaultdescription
childrenstring | JSX.Elementnullmight be a pure string or a string combined with a CloudWord components (description in a mode option)
widthnumber360width of the CloudLetter element in px
spaceWidthnumber32width of spaces between words in px
cloudHeightnumber32height of words/spaces/clouds in px
paddingnumber16horizontal padding of words/clouds in px
radiusnumber0.25ratio 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
snapnumber0will snaps all elements to a grid defined by ratio of cloudHeight / snap if snap > 0
gridbooleanfalsedebugger, to see the grid defined by the snap option
fillCSS Color"white"clouds will be filled with color provided
strokeCSS Color"dodgerBlue"color of clouds stroke
strokeWidthnumber2stroke width in px
shadowOffsetXnumber-3shadow offset on X-axis in px
shadowOffsetYnumber5shadow offset on Y-axis in px
shadowColorCSS Colorstrokecolor of shadow, by default takes color of stroke option
fontobjectsee belowan object with font CSS rules

font options

all params are optional

nametypedefaultdescription
colorCSS Colorstroketext color, by default takes color of stroke option
familystring"sans-serif"font-family CSS rule
sizenumber16font-size CSS rule in px
stylestring"none"font-style CSS rule
variantstring"none"font-variant CSS rule
weightstring"none"font-weight CSS rule
stretchstring"normal"font-stretch CSS rule

ChangeLog

0.2.5 — fix: avoid grid on zero-length cloudRects

Keywords

FAQs

Last updated on 30 Jul 2022

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc