https://github.com/mrcheater/text-resize-and-word-wrap-provider
https://github.com/mrcheater/text-resize-and-word-wrap-provider
preact react react-lite svg text
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mrcheater/text-resize-and-word-wrap-provider
- Owner: MrCheater
- License: mit
- Created: 2016-12-19T19:15:56.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-14T21:46:55.000Z (about 8 years ago)
- Last Synced: 2025-01-09T07:49:58.361Z (5 months ago)
- Topics: preact, react, react-lite, svg, text
- Language: JavaScript
- Homepage: https://mrcheater.github.io/text-resize-and-word-wrap-provider
- Size: 914 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/MrCheater/text-resize-and-word-wrap-provider)
# Install
```bash
npm install text-resize-and-word-wrap-provider
```
#See DEMO
https://mrcheater.github.io/text-resize-and-word-wrap-provider/
[](https://mrcheater.github.io/text-resize-and-word-wrap-provider/)
#See DEMO SOURCES
https://github.com/MrCheater/text-resize-and-word-wrap-provider/tree/master/examples
# Usage
```javascript
import {
Text,
TextResizeAndWordWrapProvider,
textResizeAndWordWrap
} from 'text-resize-and-word-wrap-provider';
```
# Browser support
* Chrome
* Safari 5.1.7+
* Edge
* IE 9
* IE 10
* IE 11
* Firefox 3.5+
* Opera 12+
* Midori (font-size < 3px - no support)
# Compiler targets
* React
* Preact
* React-lite
## Text (Standalone)
#### Simple Text
```javascript
Hello world
```
#### Rich Text
```javascript
Title
Hello
world
```
## PropTypes
```javascript
type CSSUnitString = oneOfTypes([
Number,
String /(^-?\d*\.?\d+)(cm|mm|in|px|pt|pc)?$/
])
// CSSUnitString.Example:
// 96, '1in', '2.54cm', '25.4mm', '72pt', '6pc', '96px', '96'
Text.propTypes = {
x : CSSUnitString,
y : CSSUnitString,
width : CSSUnitString,
height : CSSUnitString,
textAlign : oneOf(['left', 'right', 'center']),
verticalAlign : oneOf(['top', 'bottom', 'middle']),
color : String,
scale : Number, //0...1
group : oneOfType([React.PropTypes.string, React.PropTypes.number]),
debugMode : Boolean,
onClick : Function,
onMouseOver : Function,
onMouseOut : Function,
};
Text.defaultProps = {
textAlign : 'center',
verticalAlign : 'middle',
scale : 1,
x : 0,
y : 0,
};
```
##Text + Context Provider
```javascript
Hello world
```
or
```javascript
@textResizeAndWordWrap
export class Demo extends React.Component {
render() {
return (
Hello world
);
}
}
```
or
```javascript
export class DemoView extends React.Component {
render() {
return (
Hello world
);
}
}
export const Demo = textResizeAndWordWrap(DemoView);
```
# Build and Start Demo-Server
First Console:
```bash
npm install -g [email protected]
npm install -g babel-cli
npm install
npm run build
```
Second Console:
```bash
npm run start
#Open http://localhost:3000/
```