https://github.com/pnicolli/react-text-on-svg

React component that draws an svg box with text on it.
https://github.com/pnicolli/react-text-on-svg

Last synced: 6 days ago
JSON representation

React component that draws an svg box with text on it.

• Host: GitHub
• URL: https://github.com/pnicolli/react-text-on-svg
• Owner: pnicolli
• License: mit
• Created: 2017-05-18T23:05:28.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-27T16:01:54.000Z (over 7 years ago)
• Last Synced: 2024-09-07T23:08:31.347Z (2 months ago)
• Language: JavaScript
• Size: 51.8 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-text-on-svg

React component that draws an svg box with text on it.

## Features

It's a very easy to use React component, but it already has many possibile configurations:

- Height

- Width

- Text width inside the rectangle

- Font size

- Font weight

- Font family

- Custom class name

- Background color

- Text color

## Installation

Install the package with either yarn or npm.

With yarn:

```sh

$ yarn add react-text-on-svg

```

With npm:

```sh

$ npm install --save react-text-on-svg

```

## Usage

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import TextOnSvg from 'react-text-on-svg';

class App extends React.Component {

  render() {

    return (

      

    );

  }

}

ReactDOM.render(, document.getElementById('root'));

```

Parameter types are as follows:

- `className`: string

- `text`: string

- `width`: integer number

- `height`: integer number

- `textWidth`: floating point number - this is used as a percentage, see below

- `fontSize`: integer number

- `fontWeight`: integer number

- `fontFamily`: string

- `backgroundColor`: string

- `color`: string

`textWidth` is a percentage of the rectangle width. For example, if you pass 0.8 as text width, the text will use 80% of the rectangle width, always centered horizontally.

## Why u do dis

This component started as a way to experiment using svg elements inside React elements. I wanted to see how easy it could be to create something like Facebook's new posts with colored background. The outcome is not equal to theirs, but it's really close and it could definitely become equivalent by putting more work into this.

## Future developments

I have a couple things in mind that could make this more useful:

- Allowing gradients as a background

- Automatically scale down font size if the text is too long

- Being able to output also as an image (png for example)