💿 UI component to draw curved text in circles
Currently, this module is only available for React, but I have plans to support all major frontend libraries such as Vue and Svelte.
# ⎊ Arc Reactor(Cool!)
yarn add @arctext/react
import { ArcText } from '@arctext/react'
<ArcText text="@junhoyeo" width={500} characterWidth={4.8} />
// You can pass `radius` instead of `width`
<ArcText text="@junhoyeo" radius={250} characterWidth={4.8} />
<ArcText
text="@junhoyeo"
upsideDown
width={500}
characterWidth={4.8}
/>
<ArcText
text="PROOF THAT TONY STARK"
characterWidth={6}
radius={250}
>
<ArcText
text="HAS A HEART"
upsideDown // bottom text
characterWidth={6}
radius={250}
/>
</ArcText>
Monospaced fonts—the fonts that have the same width for each character—are recommended here. The result may look awkward with other typefaces.
import { ArcText } from '@arctext/react'
import styled from 'styled-components'
<Circle text="@junhoyeo" width={500} characterWidth={4.8} />
// Styling is based on `className`
const Circle = styled(ArcText)`
background-color: white;
border-width: 50%;
// Applied to each characters
& span.character {
color: black;
font-size: 37px;
font-family: monospace;
}
`