{"id":16820507,"url":"https://github.com/techniq/react-svg-text","last_synced_at":"2025-03-22T03:31:38.292Z","repository":{"id":57345985,"uuid":"103348321","full_name":"techniq/react-svg-text","owner":"techniq","description":"Better SVG text component for React","archived":false,"fork":false,"pushed_at":"2018-04-10T14:03:53.000Z","size":931,"stargazers_count":22,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-30T07:26:59.955Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://techniq.github.io/react-svg-text/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techniq.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-13T03:23:30.000Z","updated_at":"2024-10-18T17:54:44.000Z","dependencies_parsed_at":"2022-09-18T08:30:19.600Z","dependency_job_id":null,"html_url":"https://github.com/techniq/react-svg-text","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-svg-text","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-svg-text/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-svg-text/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techniq%2Freact-svg-text/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techniq","download_url":"https://codeload.github.com/techniq/react-svg-text/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244902929,"owners_count":20529114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T10:57:03.018Z","updated_at":"2025-03-22T03:31:37.728Z","avatar_url":"https://github.com/techniq.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Better SVG text component for React\n\n**Note: Merged into [vx](https://github.com/hshoff/vx) and is now [@vx/text](https://github.com/hshoff/vx/tree/master/packages/vx-text)**\n\n## Features\n- Word-wrapping (when `width` prop is defined)\n- Vertical alignment (`verticalAnchor` prop)\n- Rotation (`angle` prop)\n- Scale-to-fit text (`scaleToFit` prop)\n\n## Example\nSimple demo to show off a useful feature.  Since svg `\u003ctext\u003e` itself does not support `verticalAnchor`, normally text rendered at `0,0` would be outside the viewport and not visible.  By using `\u003cText\u003e` with `verticalAnchor=\"start\"` prop, the text will now be visible as you'd expect.\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport Text from 'react-svg-text';\n\nconst App = () =\u003e (\n  \u003csvg\u003e\n    \u003cText verticalAnchor=\"start\"\u003eHello world\u003c/Text\u003e\n  \u003c/svg\u003e\n);\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\nSee [demo](https://techniq.github.io/react-svg-text/) to see additional props and how they work\n\n### Props\nProperty | Type | Default | Description\n-------- | ---- | ------- | -----------\n`x` | number | | x coordinate to use as a basis for positioning the text element\n`y` | number | | y coordinate to use as a basis for positioning the text element\n`dx` | number | | Horizontal shift from the x coordinate\n`dy` | number | | Vertical shift from the y coordinate\n`width` | number | | Width of text container.  Used to implement word wrapping and for context when `scaleToFit` is true\n`scaleToFit` | bool | false | Resize text to fit container width\n`angle` | number | | Rotate text around origin (defined by `textAnchor` and `verticalAnchor`)\n`textAnchor` | string | start | How the text is horizontally positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`, and `inherit`.\n`verticalAnchor` | string | end | How text is vertically positioned relative to the given `x` and `y` coordinates. Options are `start`, `middle`, `end`\n`lineHeight` | string | 1em | How much space a single line of text should take up\n`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\nadditional props | | | Additional props are passed down to underlying `\u003ctext\u003e` component, including `style` and `className`\n\n## TODO\n- Fix tests (jsdom does not support `getComputedTextLength()` or `getBoundingClientRect()`) and setup CI\n  - Consider using [jest-electron-runner](https://github.com/d4rkr00t/jest-electron-runner), although it currently hangs.  Seems to be a [known issue](https://github.com/d4rkr00t/jest-electron-runner/issues/5)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Freact-svg-text","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechniq%2Freact-svg-text","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechniq%2Freact-svg-text/lists"}