open-index/open-npm huggingface dataset:
npm package: @sch39/canvas-text-paragraphs
Description: a lightweight JavaScript library designed to simplify the process of managing text paragraphs within a canvas environment. It provides a comprehensive set of tools for aligning, indenting, and spacing text paragraphs, enabling developers to create visuall
Author: Sukron Ch
Latest version: 1.0.3

# Canvas Text Paragraphs
Canvas Text Paragraphs is a JavaScript library designed to facilitate the rendering of formatted paragraphs on an HTML5 canvas element. It provides functionality to manage text alignment, indentation, line spacing, and vertical positioning within the canvas.

## Installation
You can install Canvas Text Paragraphs via npm:
```
npm install @sch39/canvas-text-paragraphs
```
or from unpkg
```
<script src="https://unpkg.com/@sch39/canvas-text-paragraphs@latest/dist/index.umd.js"></script>
```

## Usage
### Importing the Library
```
import canvasTextParagraphs from '@sch39/canvas-text-paragraphs'
```
### Example
```
import canvasTextParagraphs from '@sch39/canvas-text-paragraphs';

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const text = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla facilisi. Integer id elit varius, commodo tortor eget,
lacinia ligula. Ut interdum nisi non dui pretium faucibus.
`;

canvasTextParagraphs(text, ctx, {
  align: 'center',
  verticalAlign: 'middle',
  spaceBeforeParagraph: 20,
  spaceAfterParagraph: 20,
  indent: {
    type: 'firstLine',
    by: 40,
  },
});


```

## Demo
Link: [Click here](https://sch39.dev/apps/libs/@sch39/canvas-text-paragraphs/demo)

Live Demo: [Click here](https://codepen.io/sch39/pen/abrgPEM)

## Function Parameter
* **text** (string): The text content to be rendered.
* **ctx** (CanvasRenderingContext2D): The canvas rendering context.
* **options** (object): Optional configuration object with the following properties:
  * **width** (number, default: 'auto'): Width of the paragraph area.
  * **height** (number, default: 'auto'): Height of the  paragraph area.
  * **xStart** (number, default: 0): starting position of the paragraph on the x axis
  * **yStart** (number, default: 0): starting position of the paragraph on the y axis
  * **align** (string, default: 'left'): Horizontal text alignment ('left', 'center', 'right', 'justify').
  * **verticalAlign** (string, default: 'top'): Vertical text alignment ('top', 'middle', 'bottom').
  * **baseLine** (string, default: 'top'): Text baseline alignment ('top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom').
  * **spaceBeforeParagraph** (number, default: 0): Space before each paragraph.
  * **spaceAfterParagraph** (number, default: 0): Space after each paragraph.
  * **lineSpacing** (number or string, default: 'auto'): Line spacing factor or 'auto' for automatic spacing.
  * **indent** (object):
    * **type** (string, default: 'none'): Type of indentation ('none', 'firstLine', 'hanging').
    * **by** (number, default: 0): Indentation amount in pixels.

## License

This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
npm package: @schaapdigitalcreatives/react-router-innerhtml-links
Description: Handle innerHTML links the React Router way.
Author: SchaapOntwerpers
Latest version: 2.0.4

# React Router innerHTML Links
Used to let innerHTML links be handled the react-router way. For example links created in WordPress' wysiwyg editor.

## Installation
Using NPM:

```
npm install react-router-innerhtml-links --save
```

Using Yarn:

```
yarn add react-router-innerhtml-links
```

## How to use

### Import
Import the class in the component that needs it.

```js
import Links from 'react-router-innerhtml-links';
```

### Mount
Run it on mount. Bind it to the component so that you can run it on Unmount again to remove listeners.

Accepts two parameters

* An element ref ([docs](https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element)).
* [Browser history](https://www.npmjs.com/package/history#usage).

```js
componentDidMount() {
  this.links = new Links(this.div, storeHistory);
}
```

### Unmount
Remove event listeners.

```js
componentWillUnmount() {
  this.links.removeListeners();
}
```

### Exclude
You can exclude links in elements by adding a `data-nolinks` attribute to the parent.

```html
<div data-nolinks>
  <a href="#">Excluded link</a>
</div>
```
npm package: @schaapdigitalcreatives/react-router-scroll-position
Description: Correctly set scroll position when route changes.
Author: SchaapOntwerpers
Latest version: 2.1.5

# React Router Scroll Position
This library can correct the scroll position when changing routes. This means it can restore the scroll position to it's original state when moving backwards in the browser. It will also check for hash locations and find that element on the page to set the scroll position to that location. If none of the above apply, it will set the scroll position to 0 (top).

It's mostly usefull when working with animated routes, so that you can control when the scroll position should be set correctly.

## Installation
Using NPM:

```
npm install react-router-scroll-position --save
```

Using Yarn:

```
yarn add react-router-scroll-position
```

## How to use

### Scroll restoration
Turn off scroll restoration for the best experience.

```js
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}
```

### Fixed elements
To get the correct scroll position with fixed elements in mind (for example a sticky header), make sure you add a `data-fixed` attribute to all elements that are fixed position and should be distracted for calculation of position.

```js
<Header data-fixed />
```

### Helper functions
Use the two helper functions provided by the library.

#### setScrollPosition
Used to set the scroll position when a route is mounted.

```js
import { setScrollPosition } from 'react-router-scroll-position';
```

Accepts one argument:

* [Browser history](https://www.npmjs.com/package/history#usage).

```js
componentDidMount() {
  setScrollPosition(history);
}
```

#### storeScrollPosition
Used to store the scroll position when a route is unmounted.
Use this on the component with the `Switch` from react-router ([docs](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md)).
Make sure the component has access to the history object's properties, for instance by using `withRouter` ([docs](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md)).

```js
import {
  getScrollPosition,
  storeScrollPosition,
} from 'react-router-scroll-position';

getSnapshotBeforeUpdate(prevProps, prevState) {
  return getScrollPosition();
}

componentDidUpdate(prevProps, prevState, scrollTop) {
  const { location } = prevProps;

  storeScrollPosition(location, scrollTop);
}
```