Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-svg-text
Advanced tools
## Features - Word-wrapping (when `width` prop is defined) - Vertical alignment (`verticalAnchor` prop) - Rotation (`angle` prop) - Scale-to-fit text (`scaleToFit` prop)
width
prop is defined)verticalAnchor
prop)angle
prop)scaleToFit
prop)Simple demo to show off a useful feature. Since svg <text>
itself does not support verticalAnchor
, normally text rendered at 0,0
would be outside the viewport and not visible. By using <Text>
with verticalAnchor="start"
prop, the text will now be visible as you'd expect.
import React from 'react';
import { render } from 'react-dom';
import Text from 'react-svg-text';
const App = () => (
<svg>
<Text verticalAnchor="start">Hello world</Text>
</svg>
);
render(<App />, document.getElementById('root'));
See demo to see additional props and how they work
Property | Type | Default | Description |
---|---|---|---|
x | number | x coordinate to use as a basis for positioning the text element | |
y | number | y coordinate to use as a basis for positioning the text element | |
dx | number | Horizontal shift from the x coordinate | |
dy | number | Vertical shift from the y coordinate | |
width | number | Width of text container. Used to implement word wrapping and for context when scaleToFit is true | |
scaleToFit | bool | false | Resize text to fit container width |
angle | number | Rotate text around origin (defined by textAnchor and verticalAnchor ) | |
textAnchor | string | start | How the text is horizontally positioned relative to the given x and y coordinates. Options are start , middle , end , and inherit . |
verticalAnchor | string | end | How text is vertically positioned relative to the given x and y coordinates. Options are start , middle , end |
lineHeight | string | 1em | How much space a single line of text should take up |
capHeight | string | 0.71em (Magic number from d3) | Defines a text metric for the font being used: the expected height of capital letters. This is necessary because of SVG, which (a) positions the bottom of the text at y, and (b) has no notion of line height. This prop should be given as a number of ems |
additional props | Additional props are passed down to underlying <text> component, including style and className |
getComputedTextLength()
or getBoundingClientRect()
) and setup CI
FAQs
## Features - Word-wrapping (when `width` prop is defined) - Vertical alignment (`verticalAnchor` prop) - Rotation (`angle` prop) - Scale-to-fit text (`scaleToFit` prop)
The npm package react-svg-text receives a total of 191 weekly downloads. As such, react-svg-text popularity was classified as not popular.
We found that react-svg-text 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.