# react-fns-dom-elements

> A minimal boilerplate for building a react component for npm, including a demo page.

Latest version **0.0.2** (published 2018-02-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fns-dom-elements
pnpm add react-fns-dom-elements
yarn add react-fns-dom-elements
bun add react-fns-dom-elements
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-02-03 |
| First published | 2018-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | hyogman |
| Maintainers | hyogman |
| Keywords | react, dom, api, render props |

## Links

- npm: https://www.npmjs.com/package/react-fns-dom-elements
- Repository: https://github.com/hyogman/react-fns-dom-elements
- Homepage: https://github.com/yogaboll/react-npm-component-starter
- Issues: https://github.com/hyogman/react-fns-dom-elements/issues
- npm.io page: https://npm.io/package/react-fns-dom-elements

## Dependencies (4)

- [prettier](https://npm.io/package/prettier.md) ^1.10.2
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.0.0-beta.39
- [babel-plugin-transform-class-properties](https://npm.io/package/babel-plugin-transform-class-properties.md) ^6.24.1

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2018-02-03
- 0.0.1 — 2018-02-03

## README

# React render prop components for DOM element api

Inspired by: [react-fns](https://github.com/jaredpalmer/react-fns)

So far just implemented: [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)

`yarn add react-fns-dom-elements`

## Simple Example

```js
import { GetBoundingClientRect } from 'react-fns-dom-elements'
     
     <GetBoundingClientRect
        scroll
        resize
        render={({ bottom, height, left, right, top, width, x, y }) => (
          <div
            style={{
              position: "fixed",
              border: "1px solid red",
              left: "15em",
              right: "1em",
              top: "1em",
              width: `${top * -1}px`,
              height: `${right / 2}px`,
            }}
          >
            <p>bottom: {bottom}</p>
            <p>height: {height}</p>
            <p>left: {left}</p>
            <p>right: {right}</p>
            <p>top: {top} </p>
            <p>x: {x} </p>
            <p>y: {y} </p>
          </div>
        )}
      />

```

The props `bottom, height, left, right, top, width, x, y` are injected when the render prop component is mounted. With them you can compute different styles accordingly to your component in the `render` props. In addition you can add a `scroll` listener or a window `resize` listener so that getBoundingRectClient() is called on every scroll or window adjustment. 

If neither of `scroll` or `resize` is added then getBoundingRectClient() is only called on initial mount. 

## Typing
 `bottom, height, left, right, top, width, x, y` : `number`
 
 `render` : `function react component`
 
 `scroll` : `boolean`
 
 `resize` : `boolean`
 
 ## Gif example
 
 Below with this example we see the width of the container changing due to the position of the scroll and the height of the container changing due to the size of the window. 
 
 
 
 ![fns](https://user-images.githubusercontent.com/6344422/35771559-19ac35e2-092f-11e8-9dc5-086d323e11ae.gif)

---
_Source: https://npm.io/package/react-fns-dom-elements · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._