open-index/open-npm huggingface dataset:
npm package: @jackyef/preact-render-to-string
Description: Render JSX to an HTML string, with support for Preact components.
Author: Jason Miller
Latest version: 5.1.4

# preact-render-to-string

[![NPM](http://img.shields.io/npm/v/preact-render-to-string.svg)](https://www.npmjs.com/package/preact-render-to-string)
[![travis-ci](https://travis-ci.org/preactjs/preact-render-to-string.svg)](https://travis-ci.org/preactjs/preact-render-to-string)

Render JSX and [Preact] components to an HTML string.

Works in Node & the browser, making it useful for universal/isomorphic rendering.

\>\> **[Cute Fox-Related Demo](http://codepen.io/developit/pen/dYZqjE?editors=001)** _(@ CodePen)_ <<


---


### Render JSX/VDOM to HTML

```js
import render from 'preact-render-to-string';
import { h } from 'preact';
/** @jsx h */

let vdom = <div class="foo">content</div>;

let html = render(vdom);
console.log(html);
// <div class="foo">content</div>
```


### Render Preact Components to HTML

```js
import render from 'preact-render-to-string';
import { h, Component } from 'preact';
/** @jsx h */

// Classical components work
class Fox extends Component {
	render({ name }) {
		return <span class="fox">{ name }</span>;
	}
}

// ... and so do pure functional components:
const Box = ({ type, children }) => (
	<div class={`box box-${type}`}>{ children }</div>
);

let html = render(
	<Box type="open">
		<Fox name="Finn" />
	</Box>
);

console.log(html);
// <div class="box box-open"><span class="fox">Finn</span></div>
```


---


### Render JSX / Preact / Whatever via Express!

```js
import express from 'express';
import { h } from 'preact';
import render from 'preact-render-to-string';
/** @jsx h */

// silly example component:
const Fox = ({ name }) => (
	<div class="fox">
		<h5>{ name }</h5>
		<p>This page is all about {name}.</p>
	</div>
);

// basic HTTP server via express:
const app = express();
app.listen(8080);

// on each request, render and return a component:
app.get('/:fox', (req, res) => {
	let html = render(<Fox name={req.params.fox} />);
	// send it back wrapped up as an HTML5 document:
	res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});
```


---


### License

[MIT]


[Preact]: https://github.com/developit/preact
[MIT]: http://choosealicense.com/licenses/mit/
npm package: @jackyef/use-intersect
Description: React hook to easily use IntersectionObserver in your React app
Author: Jacky Efendi
Latest version: 0.0.6

# useIntersect()

This is a simple React custom hook to easily use IntersectionObserver in your React app.

## Usage
Simply call `useIntersect` and pass it a function that you want to be fired once an element is intersected.
The hook will return a React ref object for you to assign to your element.

```javascript
import useIntersect from '@jackyef/use-intersect';

/**
 * @param {Function} onIntersect Function to call once intersected
 * @param {Object} optionsData Options object used to initialize IntersectionObserver
 * @param {boolean} onlyOnce Whether to stop observing after onIntersect is fired once
 * 
 * @returns {Object} A ref object created by useRef. Use this to assign to the element you want to observe.
 */
 const Component = () => {
   const targetRef = useIntersect(() => console.log('impressed!'));
 
   return <div ref={targetRef}>Something here</div>
 }
```