https://github.com/tdjsnelling/verse
A React component for rendering poetry
https://github.com/tdjsnelling/verse
poetry react react-components verse
Last synced: about 1 month ago
JSON representation
A React component for rendering poetry
- Host: GitHub
- URL: https://github.com/tdjsnelling/verse
- Owner: tdjsnelling
- Created: 2024-12-09T18:03:47.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-12-10T17:35:25.000Z (6 months ago)
- Last Synced: 2025-04-10T21:40:28.125Z (about 2 months ago)
- Topics: poetry, react, react-components, verse
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@tdjsnelling/verse
- Size: 46.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# verse
A React component for rendering poetry.
## Features
* Line numbering
* Automatically recalculated if lines wrap
* Indentation of wrapped lines
* Preserves white space
* Bold & italic formatting
## Usage
```
npm install @tdjsnelling/verse
```
```typescript jsx
import React from "react";
import Verse from "@tdjsnelling/verse";
import "@tdjsnelling/verse/dist/index.css";
import poem from "./poem";
export default function App() {
return (
);
}
```
## Options
| Name | Type | Required | Default | Note |
|-------------------|---------|----------|---------|----------------------------------------------------------------------------|
| `verse` | String | yes | none | The verse to render. Use a template literal to preserve white space |
| `lineHeight` | Number | no | 22 | Line height in pixels |
| `width` | String | no | 100% | A valid CSS width value |
| `noLineNumbers` | Boolean | no | false | Hide line numbers |
| `counterSkipChar` | String | no | ! | Prefix lines with this character and they won't increment the line counter |
## Formatting
Bold (`**bold**`) and italic (`*italic*`) delimiters in the supplied verse will be rendered as such.
Prefixing a line with the skip character (default `!`) will mean that line does not increment the line counter. Useful for things like intra-poem paragraph titles. Empty lines do not need the skip character.
## Styling
Custom CSS can be supplied for the following class names:
* `Verse_Verse`
* `Verse_LineNumbers`
* `Verse_Line`
## [Demo](https://codesandbox.io/p/sandbox/txmpn5)