The @vx/text provides a better SVG <Text> component with the following features
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 thus not visible. By using <Text> with the 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 '@vx/text';
const App = () => (
<svg>
<Text verticalAnchor="start">Hello world</Text>
</svg>
);
render(<App />, document.getElementById('root'));
npm install --save @vx/text
# Text.angle<number>
# Text.capHeight<union(number|string)>
| Default | '0.71em' |
# Text.children<any>
# Text.dx<union(number|string)>
| Default | 0 |
# Text.dy<union(number|string)>
| Default | 0 |
# Text.innerRef<union(func|object)>
# Text.lineHeight<union(number|string)>
| Default | '1em' |
# Text.scaleToFit<bool>
| Default | false |
# Text.style<object>
# Text.textAnchor<enum('start'|'middle'|'end'|'inherit')>
| Default | 'start' |
# Text.verticalAnchor<enum('start'|'middle'|'end')>
| Default | 'end' |
# Text.width<number>
# Text.x<union(number|string)>
| Default | 0 |
# Text.y<union(number|string)>
| Default | 0 |
v0.0.193
See the TypeScript project for a full list of issues + PRs.
lib/index.d.tspropTypes are likely stricter now@vx/brush now exports a working Brush component :tada:react hooks + types@vx/brush demo is added@vx/boxplot deprecated in favor of @vx/stats #561radius and distance values in the @vx/mock-data exoplanet dataset were updated from strings to numbers to remove the need for consumers to coerce to numbers themselves #579react@^16.3 for React.Fragment, dropping support for react@^15<g> wrapper around Drag children was replaced with a React.Fragment which removes a DOM element.PatternOrientation is no longer the default export of @vx/patterns/lib/constants and is instead a named export. PatternOrientation is still used as the export name if importing from the index: import { PatternOrientation } from '@vx/pattern' #503react@^16.3 for React.Fragment, dropping support for react@^15Arc centroid prop was removed as it was not functional (it was called as if it was an arc.centroid() configuration parameter, but in reality the .centroid method is for returning the centroid of a datum.Area component is no longer wrapped in an empty <g> elementorder and offset props for Stack, BarStack, BarStackHorizontal, and AreaStack previously supported string, array, or functions. Only the string prop was functional, and only the enumerated string presets are now allowed.react@^16.3 for React.Fragment, dropping support for react@^15 #512react@^16.3 for React.Fragment, dropping support for react@^15<Nodes /> inner node wrapper <g> element className changed to singular (vx-network-nodes => vx-network-node) and outer wrapper <g> was replaced with a React.Fragment<Links /> inner link wrapper <g> element className changed to singular (vx-network-links => vx-network-link) and outer wrapper <g> was replaced with a React.Fragmentreact@^16.3 for React.Fragment, dropping support for react@^15children prop removed from GlyphDot componentreact@^16.3 for React.Fragment, dropping support for react@^15 #520react@^16.3 for React.Fragment, dropping support for react@^15 #524Threshold id prop required #533react@^16.3 for React.Fragment, dropping support for react@^15 #537react@^16.3 for React.Fragment, dropping support for react@^15src/legends/* => src/*react@^16.3 for React.Fragment, dropping support for react@^15src/violinplot/ViolinPlot.jsx => src/ViolinPlot.tsxsrc/boxplot/BoxPlot.jsx => src/BoxPlot.tsxChanges:
- @vx/annotation: 0.0.192 => 0.0.193
- @vx/axis: 0.0.192 => 0.0.193
- @vx/bounds: 0.0.192 => 0.0.193
- @vx/brush: 0.0.192 => 0.0.193
- @vx/chord: 0.0.192 => 0.0.193
- @vx/clip-path: 0.0.192 => 0.0.193
- @vx/curve: 0.0.192 => 0.0.193
- @vx/demo: 0.0.192 => 0.0.193
- @vx/drag: 0.0.192 => 0.0.193
- @vx/event: 0.0.192 => 0.0.193
- @vx/geo: 0.0.192 => 0.0.193
- @vx/glyph: 0.0.192 => 0.0.193
- @vx/gradient: 0.0.192 => 0.0.193
- @vx/grid: 0.0.192 => 0.0.193
- @vx/group: 0.0.192 => 0.0.193
- @vx/heatmap: 0.0.192 => 0.0.193
- @vx/hierarchy: 0.0.192 => 0.0.193
- @vx/legend: 0.0.192 => 0.0.193
- @vx/marker: 0.0.192 => 0.0.193
- @vx/mock-data: 0.0.192 => 0.0.193
- @vx/network: 0.0.192 => 0.0.193
- @vx/pattern: 0.0.192 => 0.0.193
- @vx/point: 0.0.192 => 0.0.193
- @vx/responsive: 0.0.192 => 0.0.193
- @vx/scale: 0.0.192 => 0.0.193
- @vx/shape: 0.0.192 => 0.0.193
- @vx/stats: 0.0.192 => 0.0.193
- @vx/text: 0.0.192 => 0.0.193
- @vx/threshold: 0.0.192 => 0.0.193
- @vx/tooltip: 0.0.192 => 0.0.193
- @vx/voronoi: 0.0.192 => 0.0.193
- @vx/vx: 0.0.192 => 0.0.193
- @vx/zoom: 0.0.192 => 0.0.193
FAQs
vx text
The npm package @vx/text receives a total of 54,544 weekly downloads. As such, @vx/text popularity was classified as popular.
We found that @vx/text demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers 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.
Research
Security News
Malicious Go packages are impersonating popular libraries to install hidden loader malware on Linux and macOS, targeting developers with obfuscated payloads.
Security News
Bybit's $1.46B hack by North Korea's Lazarus Group pushes 2025 crypto losses to $1.6B in just two months, already surpassing all of 2024's $1.49B total.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.