open-index/open-npm huggingface dataset:
npm package: @renci/helx-react-search
Description: Made with create-react-library
Author: mbwatson
Latest version: 0.1.1

# helx-search

> Made with create-react-library

[![NPM](https://img.shields.io/npm/v/helx-search.svg)](https://www.npmjs.com/package/@renci/helx-react-search) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @renci/helx-react-search
```

## Usage

### The `HelxSearch` Context

The names export `HelxSearch` is a context provider that should wrap any and all HeLx search functionality in your application.

```jsx
// app.js
import React, { Component } from 'react'
import { HelxSearch } from '@renci-helx-search'
import { MyCustomSearchInterface } from './my-search-interface'

export const App = () => {
  return (
    <HelxSearch>
      <h1>HeLx Search</h1>

      <MyCustomSearchInterface />

    </HelxSearch>
  )
}
```

Any child component, such as the `<MyCustomSearchInterface />` component in the above example, has access to the search context.

The search context provides access to
- the search function;
- the loading state;
- the results;
- the number of pages of results (depends on `page` and `perPage` config options).

### The `useHelxSearch` Hook 

```jsx
// my-search-interface.js
import React, { Fragment, useRef, useState } from 'react'
import { useHelxSearch } from 'helx-search'

export const MyCustomSearchInterface = () => {
  const searchInput = useRef()
  const { doSearch, hits, loading, pageCount, total } = useHelxSearch({
    index: 'concepts_index',
  })
  const [perPage, setPerPage] = useState(10)
  const [page, setPage] = useState(1)

  const handleSubmit = () => {
    const mySearchTerm = searchInput.current.value
    doSearch(mySearchTerm, { perPage: perPage, page: page })
  }

  return (
    <div>
      <hr/>

      <input value="heart" ref={ searchInput }/>
      <button onClick={ handleSubmit }>submit</button>
      
      <hr/>

      {
        loading && <div>Searching...</div>
      }

      {
        !loading && (
          <Fragment>
            { total } hits<br/>
            { pageCount } pages<br/>

            <hr/>

            {
              hits.map(hit => <div key={ hit.id }>{ hit.id } :: { hit.name }</div>)
            }
          </Fragment>
        )
      }

    </div>
  )
}

```
## License

MIT © [mbwatson](https://github.com/mbwatson)
npm package: @renci/react-arcgis-components
Description: Made with create-react-library
Author: mbwatson
Latest version: 0.1.0

# @renci/react-esri-components

This contains Path and marker components for use with [@esri/react-arcgis](https://github.com/Esri/react-arcgis).

## installation

```bash
$ npm i @renci/react-arcgis-components
```

## usage

Note that `@esri/react-arcgis` is a peer dependency of this package.

### import

```jsx
import React from 'react'
import { Map } from '@esri/react-arcgis'
import { Marker, Path } from 'react-esri-components'
```

### use

```jsx
// path = [{ long: -78.738638, lat: 23.875623 }, ...]
// markers = [{ long: -78.738638, lat: 23.875623 }, ...]

<Map>
  <Path coordinates={ path } />
  {
    markers.map((props, i) => (
      <Marker key={ `marker-${ i }_-${ props.long },${ props.lat }` } { ...props } />
    ))
  }
</Map>

```

## development

clone this repo.

```bash
$ git clone git remote add origin git@github.com:RENCI/react-arcgis-components.git
```

install dependencies.

```bash
$ npm i
```

start package local dev server.

```bash
$ npm start
```

start example local dev server..

```bash
$ cd example
$ npm start
```

the example pulls the package source from its parent directory with hot module reloading, so changes to the example project and changes to the package source triggers a browser reload.
npm package: @rencp/vueuse
Description: Collection of suc Vue Composition Utilities
Author: rencp
Latest version: 1.0.0

# suc-vueuse

Collection of suc Vue Composition Utilities

## install

```js
npm install @suc/vueuse
```


## Usage

### useOffice
1. htmll
```html
    <div class="office"></div>
```
2. js
```js
    import { useOffice } from "@suc/vueuse";

    const { 
        type:officeType, 
        url:officeUrl, 
        render, 
        clear,
        loading 
    } = useOffice(
        '.office', //selector
        'video', //默认类型（excel,docx,pdf,video）
        {
            video: {},
            docx: {},
            excel: {},
            pdf: {}
        }
    );

    //渲染
    render()

    //清除
    clear()

```



##
npm package: @rendardev/create-react
Description: Create a new React project using @rendardev/react-template
Latest version: 1.0.5

# Create Rendardev React

React + TypeScript + Vite 프로젝트를 생성하는 도구입니다.

## 사용 방법

```bash
# npm 사용
npm create rendardev-react my-app

# yarn 사용
yarn create rendardev-react my-app

# pnpm 사용
pnpm create rendardev-react my-app
```

## 생성되는 프로젝트 특징

- **React 19** - 최신 버전의 React 사용
- **TypeScript** - 타입 안정성 확보
- **Vite** - 빠른 개발 서버와 빌드 도구
- **React Router v7** - 최신 라우팅 시스템
- **ESLint** - 코드 품질 도구
- **Prettier** - 코드 포맷팅 도구

## 패키지 구조

```
packages/
├── create-react/        # 이 패키지 (생성 도구)
├── react-template/      # 실제 템플릿
├── eslint-config/       # ESLint 설정
├── prettier-config/     # Prettier 설정
└── tsconfig/            # TypeScript 설정
```

## 개발 가이드

생성된 프로젝트의 더 자세한 정보는 생성된 프로젝트의 README.md 파일을 참조하세요.

## 라이선스

MIT
npm package: @rendardev/eslint-config
Description: ESLint configurations for Rendar Mono Template
Latest version: 1.0.2

# @rendar-mono-template/eslint-config

ESLint 설정 모음으로, Rendar Mono Template 프로젝트에서 일관된 코드 스타일과 품질을 유지하기 위해 설계되었습니다.

## 설치

```bash
# NPM
npm install --save-dev @rendardev/eslint-config

# Yarn
yarn add --dev @rendardev/eslint-config

# PNPM
pnpm add -D @rendardev/eslint-config
```

## 사용 방법

이 패키지는 다양한 개발 환경을 위한 여러 ESLint 설정을 제공합니다. 프로젝트의 루트에 `.eslintrc.js` 파일을 생성하고 필요한 설정을 확장하여 사용하세요.

### 기본 설정 (일반 JavaScript/TypeScript)

```javascript
// .eslintrc.js
module.exports = {
  extends: ["@rendardev/eslint-config"],
};
```

### React 프로젝트

```javascript
// .eslintrc.js
module.exports = {
  extends: ["@rendardev/eslint-config/react"],
};
```

### Next.js 프로젝트

```javascript
// .eslintrc.js
module.exports = {
  extends: ["@rendardev/eslint-config/next"],
};
```

### 강화된 TypeScript 타입 체크

TypeScript 프로젝트에 더 강력한 타입 체크를 적용하려면:

```javascript
// .eslintrc.js
module.exports = {
  extends: ["@rendardev/eslint-config", "@rendardev/eslint-config/typeCheck"],
};
```

### Prettier 통합

Prettier와 함께 사용하려면:

```javascript
// .eslintrc.js
module.exports = {
  extends: [
    "@rendar-mono-template/eslint-config",
    "@rendar-mono-template/eslint-config/prettier",
  ],
};
```

## 제공되는 설정 파일

이 패키지는 다음과 같은 설정 파일을 제공합니다:

- **base.js** - 기본 ESLint 설정 (내부적으로 사용됨)
- **index.js** - 기본 JavaScript/TypeScript 규칙
- **react.js** - React 프로젝트를 위한 규칙
- **next.js** - Next.js 프로젝트를 위한 규칙
- **typeCheck.js** - 강화된 TypeScript 타입 체크 규칙
- **prettier.js** - ESLint와 Prettier 통합 설정

## 추천 사용 조합

### React + TypeScript 프로젝트

```javascript
module.exports = {
  extends: [
    "@rendar-mono-template/eslint-config",
    "@rendar-mono-template/eslint-config/react",
    "@rendar-mono-template/eslint-config/typeCheck",
    "@rendar-mono-template/eslint-config/prettier",
  ],
};
```

### Next.js + TypeScript 프로젝트

```javascript
module.exports = {
  extends: [
    "@rendar-mono-template/eslint-config",
    "@rendar-mono-template/eslint-config/next",
    "@rendar-mono-template/eslint-config/typeCheck",
    "@rendar-mono-template/eslint-config/prettier",
  ],
};
```

## 규칙 사용자 정의

기본 설정을 확장하면서 프로젝트 특정 규칙을 추가하거나 재정의할 수 있습니다:

```javascript
// .eslintrc.js
module.exports = {
  extends: ["@rendar-mono-template/eslint-config"],
  rules: {
    // 사용자 정의 규칙
    "no-console": "warn",
    "react/jsx-sort-props": "error",
  },
};
```
npm package: @rendardev/prettier-config
Description: Prettier configurations for Rendar Mono Template
Latest version: 1.0.2

# @rendardev/prettier-config

Rendar Mono Template 프로젝트를 위한 공유 Prettier 설정입니다.

## 설치

```bash
npm install --save-dev @rendardev/prettier-config
# 또는
yarn add -D @rendardev/prettier-config
# 또는
pnpm add -D @rendardev/prettier-config
```

## 사용 방법

### package.json에서 사용하기

`package.json`에 다음과 같이 추가하세요:

```json
{
  "prettier": "@rendardev/prettier-config"
}
```

### .prettierrc 파일에서 사용하기

`.prettierrc` 파일을 생성하고 다음과 같이 설정하세요:

```json
"@rendardev/prettier-config"
```

또는 `.prettierrc.js` 파일을 생성하고 다음과 같이 설정하세요:

```js
module.exports = require("@rendardev/prettier-config");
```

### 설정 오버라이드하기

기본 설정을 확장하거나 오버라이드하려면 다음과 같이 할 수 있습니다:

```json
{
  "prettier": "@rendardev/prettier-config",
  "printWidth": 100,
  "singleQuote": false
}
```

또는 `.prettierrc.js`를 사용하는 경우:

```js
module.exports = {
  ...require("@rendardev/prettier-config"),
  printWidth: 100,
  singleQuote: false,
};
```

이렇게 하면 기본 설정을 유지하면서 특정 규칙만 변경할 수 있습니다.

## 설정 내용

이 설정은 다음과 같은 Prettier 규칙을 포함합니다:

- `printWidth`: 80 (한 줄의 최대 길이)
- `tabWidth`: 2 (들여쓰기 크기)
- `useTabs`: false (스페이스 사용)
- `semi`: true (세미콜론 사용)
- `singleQuote`: true (작은따옴표 사용)
- `quoteProps`: "as-needed" (필요한 경우에만 객체 속성에 따옴표 사용)
- `trailingComma`: "es5" (ES5 호환 후행 쉼표)
- `bracketSpacing`: true (객체 리터럴의 중괄호 내부 공백)
- `arrowParens`: "avoid" (단일 매개변수 화살표 함수의 괄호 생략)
- `proseWrap`: "preserve" (마크다운 텍스트 줄바꿈 보존)
- `endOfLine`: "auto" (자동 개행 문자 설정)
- `htmlWhitespaceSensitivity`: "css" (CSS 기반 HTML 공백 처리)
- `embeddedLanguageFormatting`: "off" (내장 언어 포매팅 비활성화)

## 요구사항

- Prettier 버전 3.0.0 이상

## 라이선스

MIT
npm package: @rendardev/tsconfig
Description: TSConfig configurations for Rendar Mono Template
Latest version: 1.0.1

# @rendardev/tsconfig

Rendar Mono Template의 TypeScript 설정을 위한 공유 설정 패키지입니다.

## 설치 방법

```bash
pnpm add -D @rendardev/tsconfig
```

## 설정 파일 설명

### 1. base.json

기본 TypeScript 설정 파일로, 모든 프로젝트에서 공통으로 사용되는 기본 설정을 포함합니다.

주요 설정:

- `target`: "ES2020"
- `lib`: ["DOM", "DOM.Iterable", "ESNext"]
- `strict`: true
- `module`: "ESNext"
- `moduleResolution`: "node"
- `baseUrl`: "."
- `paths`: "@/\*" 경로 별칭 설정

### 2. next.json

Next.js 프로젝트를 위한 TypeScript 설정 파일입니다.

주요 설정:

- base.json을 상속
- Next.js 플러그인 지원
- JSX 보존 설정
- Next.js 타입 시스템 통합

사용 방법:

```json
{
  "extends": "@rendardev/tsconfig/next.json"
}
```

### 3. react.json

React 프로젝트를 위한 TypeScript 설정 파일입니다.

주요 설정:

- base.json을 상속
- React JSX 지원
- CSS 모듈 타입 지원
- React 관련 최적화 설정

사용 방법:

```json
{
  "extends": "@rendardev/tsconfig/react.json"
}
```

## 프로젝트에서 사용하기

### Next.js 프로젝트

프로젝트의 `tsconfig.json`에 다음과 같이 설정을 추가합니다:

```json
{
  "extends": "@rendardev/tsconfig/next.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
```

### React 프로젝트

프로젝트의 `tsconfig.json`에 다음과 같이 설정을 추가합니다:

```json
{
  "extends": "@rendardev/tsconfig/react.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}
```

## 의존성

- typescript: ^5.7.3

## 라이선스

MIT
npm package: @render-props/compose
Description: A utility for flattening nested render props (function as child) component calls safely and in a way that doesn't take a huge performance hit.
Author: Jared Lunde
Latest version: 0.1.19

# compose ()
A utility for flattening nested render props (function as child) component calls
safely and in a way that doesn't take a huge performance hit.

### Installation
```yarn add @render-props/compose``` or ```npm i @render-props/compose```

____

#### `compose(Components <object {propName: Component}>)`
```js
// the order is important because render props from Toggle will only
// be available in a Counter prop callback if Toggle is defined before
// Counter in the composition
const Composed = compose({
  toggle: Toggle,  // cannot receive render props from Counter
  counter: Counter // can receive render props from Toggle
})

// Plain objects as props
<Composed toggle={propsPassedToToggle} counter={propsPassedToCounter}>
  {function ({toggle, counter}) {
    // toggle = render props returned by the Toggle component
    // counter = render props returned by the Counter component
  }}
</Composed>

// Function as props
<Composed
  toggle={propsPassedToToggle/*plain object*/}
  counter={
    ({toggle/*render props returned by Toggle component*/}) => ({
      initialValue: toggle.value ? 0 : 1,
      ...otherCounterProps
    })
  }
>
  {function ({toggle, counter}) {
    // toggle = render props returned by the Toggle component
    // counter = render props returned by the Counter component
  }}
</Composed>
```

____

## Usage
```js
import compose from '@render-props/compose'
import Toggle from '@render-props/toggle'
import Counter from '@render-props/counter'


const ToggleCounter = compose({toggle: Toggle, counter: Counter})

function SomeComponent (props) {
  /**
  This is the same as:

  function SomeComponent (props) {
    <Toggle initialValue={true}>
      {function (toggleContext) {
        return (
          <Counter initialValue={toggleContext.value ? 6 : 0} initialStep={4}>
            {function (counterContext) {
              const derivedProps = {
                toggle: toggleContext,
                counter: counterContext
              }

              return (
                ...
              )
            }}
          </Counter>
        )
      }}
    </Toggle>
  }
  **/
  return (
    <ToggleCounter
      toggle={{initialValue: true}}
      counter={({toggle}) => ({initialValue: toggle.value ? 6 : 0, initialStep: 4})}
    >
      {({toggle, counter}) => (
        <div>
          <div>
            Toggle value: {JSON.stringify(toggle.value)}

            <button onClick={toggle.toggle}>
              Toggle me to {toggle.value === true ? 'false' : 'true'}
            </button>
          </div>

          <div>
            Counter value: {counter.value}

            <button onClick={counter.incr}>
              incr() me by {counter.step}
            </button>

            <button onClick={counter.decr}>
              decr() me by {counter.step}
            </button>
          </div>
        </div>
      )}
    </ToggleCounter>
  )
}
```
npm package: @render-props/counter
Description: A state container which provides an interface for bound-value counting.
Author: Jared Lunde
Latest version: 0.1.21

# Counter
A state container which provides an interface for bound-value counting.

### Installation
```yarn add @render-props/counter``` or ```npm i @render-props/counter```

## Usage
```js
import Counter from '@render-props/counter'

const LikesControl = ({value, step, incr, decr, setValue, setStep}) => (
  <div>
    <span>
      Number of likes: {value}
    </span>
    <a onClick={incr}>
      Like
    </a>
    <a onClick={decr}>
      Dislike
    </a>
    <button onClick={() => setValue(12)}>
      Set value to '12'
    </button>
    <button onClick={() => setStep(3)}>
      Set step to '3'
    </button>
  </div>
)

const Likes = props => (
  <div>
    <Counter
      onChange={console.log}
      initialValue={10}
      minValue={0}
      maxValue={24}
      onBoundMin={
        function ({setValue, maxValue}) {
          setValue(maxValue)
        }
      }
      onBoundMax={
        function ({setValue, minValue}) {
          setValue(minValue)
        }
      }
    >
      {LikesControl}
    </Counter>
  </div>
)
```

____

## Props
- `initialValue {number} {default: 0}`
  - the value the counter will start at
- `initialStep {number} {default: 1}`
  - the default step amount of `incr` and `decr`
- `cast {function} {default: parseInt}`
  - the typecast of the value, e.g. `parseFloat`
- `minValue {number}`
  - the minimum value the counter is bound by
- `maxValue {number}`
  - the maximum value the counter is bound by
- `onBoundMin {function}`
  - called when the bound minimum has been reached. Callback should include one
    argument for object: `{value, step, minValue, maxValue, setValue, incr, decr}`.
- `onBoundMax {function}`
  - called when the bound maximum has been reached. Callback should include one
    argument for object: `{value, step, minValue, maxValue, setValue, incr, decr}`.
- `onChange {function}`
  - called each time the value changes. Callback accepts one argumet for `value`
- `onIncr {function}`
  - called each time the value increments. Callback accepts one argumet for `value`
- `onDecr {function}`
  - called each time the value decrements. Callback accepts one argumet for `value`


## Render Props

#### Methods
- `incr` `([by <number>])`
  - increments the value by `@by` if defined, otherwise the prop `step`
- `decr` `([by <number>])`
  - decrements the value by `@by` if defined, otherwise the prop `step`
- `setValue` `(value <number>)`
  - sets the value to `@value`
- `setStep` `(step <number>)`
  - sets the default step to `@step`

#### State
- `value {number}`
  - the current value of the counter
- `step {number}`
  - the default step amount of the counter in `incr()` and `decr()`
npm package: @render-props/debounce
Description: A state container which limits the frequency with which setState can be called using lodash's debounce function. By default, `setState` is invoked on the trailing edge of the debounce call.  If `leading` and `trailing` options are `true`, func is invoked 
Author: Jared Lunde
Latest version: 0.1.13

# Debounce
A state container which limits the frequency with which setState can be called
using lodash's debounce function. By default, `setState` is invoked on the
trailing edge of the debounce call.  If `leading` and `trailing` options are `true`,
func is invoked on the trailing edge of the timeout only if the debounced
function is invoked more than once during the `wait` timeout.

[See lodash's documentation for more details](https://lodash.com/docs/4.17.4#debounce)

![Debouncing example image](https://image.slidesharecdn.com/5fastcordova-140116132650-phpapp02/95/fast-cordova-applications-27-638.jpg?cb=1389879297)


### Installation
```yarn add @render-props/debounce``` or ```npm i @render-props/debounce```

____


## Usage
```js
import Debounce from '@render-props/debounce'


function DebouncedBodyScroller () {
  return (
    <Debounce initialState={{scrollY: 0, gt30: false}}>
      {({debounceState, state}) => (
        <body
          onScroll={
            e => debounceState(
              prevState => (
                window.scrollY > 30
                ? {gt30: true, scrollY: window.scrollY}
                : {gt30: false, scrollY: window.scrollY}
              )
            )
          }
        >
          Greater than 30? {String(state.gt30)}
        </body>
      )}
    </Debounce>
  )
}
```

____


## Props
- `initialState {object}`: the state which this component should initialize with. This component is NOT controlled so you cannot update the state of this component by changing the property value here.
- `wait {number}`: number of milliseconds to delay
- `maxWait {number}`: maximum time func is allowed to be delayed before it's invoked
- `leading {bool}`: invokes function on the leading edge of the timeout
- `traililng {bool}`: invokes function on the trailing edge of the timeout


## Render Props

#### Methods
- `debounceState`: this function is setState wrapped in lodash's debounce function.

#### State
- `state {object}`: in addition to the `debounceState` method, this component provides the state exactly as its been set using `debounceState`
npm package: @render-props/events
Description: A state container which provides an interface for managing event listeners in its children. This component will automatically garbage collect all of its registered listeners on unmount.
Author: Jared Lunde
Latest version: 0.1.13

# Events
A state container which provides an interface for managing event listeners
in its children. This component will automatically garbage collect all of its
registered listeners on unmount.


### Installation
```yarn add @render-props/events``` or ```npm i @render-props/events```


____


## Usage
```js
import Events from '@render-props/events'


class SomeComponent extends React.Component {
  componentDidMount () {
    this.props.addEvent(window, 'resize', this.handleResizeEvent)
  }
}


function SomeComponentWithEvents (props) {
  return (
    <Events>
      {({addEvent, removeEvent, removeAllEvents}) => (
        return (
          <SomeComponent
            addEvent={addEvent}
            removeEvent={removeEvent}
            {...props}
          />
        )
      )}
    </Events>
  )
}
```

____

## Render Props

#### Methods
- `addEvent` `(element, eventName <string>, listener <func>)`
  - adds an event `@listener` for `@eventName` on the provided `@element`
- `removeEvent` `(element, eventName <string>, listener <func>)`
  - removes an event `@listener` for `@eventName` on the provided `@element`
- `removeAllEvents` `([element])`
  - removes listeners from all registered events if no `@element` is provided,
    otherwise removes all listeners attached to `@element`
npm package: @render-props/hover
Description: A state container which provides an interface for listening to hover events on child components. The state of this component will only update if the device being used supports hover according to `!(window.matchMedia('(hover: none)').matches)`
Author: Jared Lunde
Latest version: 0.1.16

# Hover
A state container which provides an interface for listening to hover
events on child components. The state of this component will only update if
the device being used supports hover according to
`!(window.matchMedia('(hover: none)').matches)`

### Installation
```yarn add @render-props/hover``` or ```npm i @render-props/hover```

## Usage
```js
import Hover from '@render-props/hover'

const HoverableButton = props => (
  <Hover enterDelay={500} leaveDelay={200}>
    {
      ({isHovering, canHover, hoverRef}) => (
        <button ref={hoverRef}>
          Hovering? {JSON.stringify(isHovering)}
        </button>
      )
    }
  </Hover>
)
```

____

## Props
- `enterDelay {number}`
  - the amount of time to wait before declaring that an element is being hovered
- `leaveDelay {number}`
  - the amount of time to wait before declaring that an element is no longer
    being hovered
- `initialValue {bool}`
  - the initial `isHovering` value to initiate the component with

## Render Props

#### Ref
- `hoverRef`
  - This `ref` must be provided to whatever element you are trying to observe the
    the hover of. e.g. `<button ref={hoverRef}>`

#### State
- `isHovering {bool}`
  - `true` if the ref'd element is being hovered
- `canHover {bool}`
  - `true` if `!(window.matchMedia('(hover: none)').matches)`
npm package: @render-props/image-props
Description: A state container which provides an interface for getting the natural size, rendered size and orientation from `<img>` elements.
Author: Jared Lunde
Latest version: 0.1.18

# ImageProps
A state container which provides an interface for getting the natural size,
rendered size and orientation from `<img>` elements.

### Installation
```yarn add @render-props/image-props``` or ```npm i @render-props/image-props```

## Usage
```js
import ImageProps from '@render-props/image-props'

const ImageWithStats = props => (
  <ImageProps>
    {
      ({
        orientation,
        width,
        height,
        naturalWidth,
        naturalHeight,
        complete,
      }) => (
        <div>
          <img src='some-cat-photo.jpg' ref={hoverRef}/>
          Loaded? {complete};
          Width: {width};
          Height: {height};
        </div>
      )
    }
  </ImageProps>
)
```

____

## Render Props

#### Ref
- `imageRef`
  - This `ref` must be provided to whatever element you are trying to observe the
    the size or orientation of. e.g. `<img ref={imageRef}>`

#### State
- `orientation {landscape|square|portrait}`
  - returns `landscape` when `width > height`, `square` when `width == height`,
    and `portrait` when `width < height`
- `width {number}`
  - the rendered width of the image
- `height {number}`
  - the rendered height of the image
- `naturalWidth {number}`
  - the actual width of the image
- `naturalHeight {number}`
  - the actual height of the image
- `complete {bool}`
  - `true` if the image loaded successfully
npm package: @render-props/paragraphs
Description: A function as child component which provides an interface for creating paragraphs with line breaks from raw text with `\n` new lines. The default render child is: ```js const defaultParagraph = props => <p key={props.key} children={props.text}/> ```
Author: Jared Lunde
Latest version: 0.1.14

# Paragraphs
A function as child component which provides an interface for creating
paragraphs with line breaks from raw text with `\n` new lines. The default
render child is:
```js
const defaultParagraph = props => <p key={props.key} children={props.text}/>
```


### Installation
```yarn add @render-props/paragraphs``` or ```npm i @render-props/paragraphs```

____


## Usage
```js
import Paragraphs from '@render-props/paragraphs'


function MyParagraphs ({text}) {
  return (
    <Paragraphs text={text}>
      {({key, text, n, count}) => (
        <p
          key={key}
          className={n === count - 1 ? 'margin--b0' : 'margin--b3'}
          children={text}
        />
      )}
    </Paragraphs>
  )
}

MyParagraphs({text: 'foo\n\nbar\n\nbaz\nboz'})

/*
Outputs:
<p className='margin--b3'>
  foo
</p>
<p className='margin--b3'>
  bar
</p>
<p className='margin--b0'>
  baz
  <br/>
  boz
</p>
*/
```

____


## Props
- `text {string}`
  - the text you want to turn into paragraphs with line breaks

## Render Props

#### State
- `text` `(value <!== undefined>)`
  - the text in this paragraph with line breaks included
- `n`
  - the current paragraph index
- `count`
  - the total number of paragraphs
npm package: @render-props/rect
Description: A state container which provides an interface for retrieving the bounding client rect of a referenced element. The bounding client rect will update each time the window resizes - a behavior which can be turned off by setting the prop `recalcOnWindowResize
Author: Jared Lunde
Latest version: 0.1.22

# Rect
A state container which provides an interface for retrieving the bounding
client rect of a referenced element. The bounding client rect will update
each time the window resizes - a behavior which can be turned off by setting
the prop `recalcOnWindowResize` to `false`. It doesn't provide values for `x` and
`y`, as IE, Edge and Safari don't have them as part of their `DOMRect`.


### Installation
```yarn add @render-props/rect``` or ```npm i @render-props/rect```


____


## Usage
```js
import Rect from '@render-props/rect'

function DivWithRect (props) {
  return (
    <Rect>
      ({rectRef, recalcRect, top, right, bottom, left, width, height}) => (
        <div ref={rectRef}>
          <div>
            My width: {width}
          </div>
          <div>
            My height: {height}
          </div>
          <div>
            My position: {JSON.stringify({top, right, bottom, left})}
          </div>
        </div>
      )
    </Rect>
  )
}
```

____

## Props
- `recalcOnWindowResize {bool}`: if `true`, this component will update itself
each time a window resize event is detected. Defaults to `true`.
- `withCoords {bool}`: if `true`, this component will provide its child function
with unpacked arguments for its bounding client rect, i.e.
`{top, right, bottom, left, width, height}`. If `false`, it will provide a
function `getRect` instead which will return the same object just mentioned.
Defaults to `true`.

## Render Props

#### Ref
- `rectRef` (`element`)
  - This `ref` must be provided to whatever element you are trying to receive the
    bounding client rect for. e.g. `<div ref={rectRef}>`

#### Methods
- `recalcRect`
  - remeasures the element bound to `rectRef`
- `getRect`
  - only present if `withCoords` is set to `false`. Returns the bounding client
    rect object.

#### State
Note: these are only provided if `withCoords` is `true`.

- `top {number}`: the top coordinate value of the `DOMRect`
- `right {number}`: the right coordinate value of the `DOMRect`
- `bottom {number}`: the bottom coordinate value of the `DOMRect`
- `left {number}`: the left coordinate value of the `DOMRect`
- `width {number}`: the width of the `DOMRect`
- `height {number}`: the height of the `DOMRect`
npm package: @render-props/size-observer
Description: A state container which provides an interface for constantly querying for changes to the size of the referenced element in its child function.
Author: Jared Lunde
Latest version: 0.1.18

# SizeObserver
A state container which provides an interface for constantly querying for
changes to the size of the referenced element in its child function.

### Installation
```yarn add @render-props/size-observer``` or ```npm i @render-props/size-observer```

## Usage
```js
import SizeObserver from '@render-props/size-observer'

function SizeObservedDiv (props) {
  return (
    <SizeObserver every={100/**queries every hundred milliseconds*/}>
      ({sizeRef, width, height, recalcSize}) => (
        <div ref={sizeRef}>
          <div>
            width: {width}
          </div>
          <div>
            height: {height}
          </div>
        </div>
      )
    </SizeObserver>
  )
}
```

____

## Props
- `every {number} {default: 1000/60}`
  - the size observer will re-evaluate the size every `@every` milliseconds
- `useBoundingRect {bool} {default: false}`
  - if `true` the element will be measured with `getBoundingClientRect`
    instead of `offsetWidth` and `offsetHeight`
- `onChange {function<{width, height}>}`
  - called each time the width or height changes

## Render Props

#### Ref
- `sizeRef`
  - This `ref` must be provided to whatever element you are trying to observe the
    the size of. e.g. `<div ref={sizeRef}>`

#### Methods
- `recalcSize` `()`
  - forces the component to re-calculate the size of the element

#### State
- `width {number}`
  - the `offsetWidth` or `getBoundingClientRect().width` of the element
- `height {number}`
  - the `offsetHeight` or `getBoundingClientRect().height` of the element
npm package: @render-props/subscriptions
Description: A component for communicating changes to the state of one component to another component(s). This was much more useful before the React.createContext API in React 16.3 for ensuring context updates reached their consumers.
Author: Jared Lunde
Latest version: 0.1.11

# Subscriptions
A component for communicating changes to the state of one component to
another component(s). This was much more useful before the React.createContext
API in React 16.3 for ensuring context updates reached their consumers.


### Installation
```yarn add @render-props/subscriptions``` or ```npm i @render-props/subscriptions```

____


## Usage
```js
import Subscriptions from '@render-props/subscriptions'

// Provides notifications to OtherComponent
class SomeComponent extends React.Component {
  componentDidUpdate () {
    this.props.notify(this.state)
  }
}

// Receives notifications from SomeComponent
class OtherComponent extends React.Component {
  componentDidMount () {
    this.props.subscribe(this.updateMyState)
  }

  componentWillMount () {
    this.props.unsubscribe(this.updateMyState)
  }
}

function MovablePoint (props) {
  return (
    <Subscriptions>
      {({subscribe, unsubscribe, notify}) => (
        <>
          <SomeComponent notify={notify}/>
          <OtherComponent subscribe={subscribe} unsubscribe={unsubscribe}/>
        </>
      )}
    </Point>
  )
}
```

____

## Render Props

#### Methods
- `subscribe` `(callback <function>)`
  - `@callback` receives notifications sent out with `notify()`
- `unsubscribe` `(x <number>)`
  - `@callback` stops receiving notifications sent out with `notify()`
- `notify` `(...values <any>)`
  - sends out a notification to all subscribers of this component with the
    exact values in `@values`
npm package: @render-props/throttle
Description: A state container which limits the frequency with which setState can be called using `requestAnimationFrame`.
Author: Jared Lunde
Latest version: 0.1.18

# Throttle
A state container which limits the frequency with which setState can be called
using `requestAnimationFrame`.

This is a perfect component for capturing the state from events like scroll, keypress
and size.

![Throttling example image](https://image.slidesharecdn.com/5fastcordova-140116132650-phpapp02/95/fast-cordova-applications-27-638.jpg?cb=1389879297)

### Installation
```yarn add @render-props/throttle``` or ```npm i @render-props/throttle```


____


## Usage
```js
import Throttle from '@render-props/throttle'


function ThrottledBodyScroller () {
  return (
    <Throttle initialState={{scrollY: 0, gt30: false}}>
      {({throttleState, state}) => (
        <body
          onScroll={
            e => throttleState(
              prevState => (
                window.scrollY > 30
                ? {gt30: true, scrollY: window.scrollY}
                : {gt30: false, scrollY: window.scrollY}
              )
            )
          }
        >
          Greater than 30? {String(state.gt30)}
        </body>
      )}
    </Throttle>
  )
}
```

____


## Props
- `initialState {object}`: the state which this component should initialize with. This component is NOT controlled so you cannot update the state of this component by changing the property value here.

## Render Props

#### Methods
- `throttleState`: this function is setState wrapped in a throttle function which uses `requestAnimationFrame` to limit the number of calls to setState. This is useful for reducing the burden of rapidly-fired events like scrolling.

#### State
- `state {object}`: in addition to the `throttleState` method, this component provides the state exactly as its been set using `throttleState`
npm package: @render-props/toggle
Description: A state container which provides an interface for toggling between two values.
Author: Jared Lunde
Latest version: 0.1.30

# Toggle
A state container which provides an interface for toggling between two
values.


### Installation
```yarn add @render-props/toggle``` or ```npm i @render-props/toggle```


____


## Usage
```js
import Toggle from '@render-props/toggle'

function Toggler () {
  return (
    <Toggle
      initialValue={true}
      onValue={true/*default*/}
      offValue={false/*default*/}
    >
      {({on, off, toggle, reset, value}) => (
        <>
          <button onClick={toggle}>
            Toggle value to '{value === true ? 'false' : 'true'}'
          </button>

          <button onClick={on}>
            Toggle 'on'
          </button>

          <button onClick={off}>
            Toggle 'off'
          </button>

          <button onClick={reset}>
            Reset value to initialValue
          </button>
        </>
      )}
    </Toggle>
  )
}
```

____


## Props
- `onValue {any}`: the value to set when the `on()` method is called. Defaults to `true`.
- `offValue {any}`: the value to set when the `off()` method is called. Defaults to `false`.
- `initialValue {any}`: the initial value of the component. This creates an
  uncontrolled component. Defaults to the value of `onValue`.
- `value {any}`: the value of the component. This creates a controlled component
  which derives its state value from props
- `onChange {func}`: a callback which is invoked each time the value changes.
  Receives the new value as its only argument.

## Render Props

#### Methods
- `toggle`: toggles value between the props `onValue` and `offValue`
- `on`: sets value to the value provided via the prop `onValue`
- `off`: sets value to the value provided via the prop `offValue`
- `reset`: sets value to the `initialValue` prop

#### State
- `value {any}`: the current value in the state
npm package: @render-props/value
Description: A state container which provides an interface for setting single values.
Author: Jared Lunde
Latest version: 0.1.28

# Value
A state container which provides an interface for setting single
values.


### Installation
```yarn add @render-props/value``` or ```npm i @render-props/value```


____


## Usage
```js
import Value from '@render-props/value'


function ValueSetter () {
  return (
    <Value initialValue='foo'>
      {({setValue, clearValue, resetValue, value}) => (
        <>
          <button onClick={() => setValue(value === 'foo' ? 'bar' : 'foo')}>
            Change value to '{value === 'foo' ? 'bar' : 'foo'}'
          </button>

          <button onClick={clearValue}>
            Make value 'undefined'
          </button>

          <button onClick={resetValue}>
            Reset value to initialValue
          </button>
        </>
      )}
    </Value>
  )
}
```

____


## Props
- `initialValue {any}`: the initial value of the component. This creates an
  uncontrolled component.
- `value {any}`: the value of the component. This creates a controlled component
  which derives its state value from props
- `onChange {func}`: a callback which is invoked each time the value changes.
  Receives the new value as its only argument.

## Render Props

#### Methods
- `setValue` `(value <!== undefined>)`: sets state.value to `@value`. You can also
  provide a function here, the return value of which will be the new value that
  gets set. The function receives two arguments, `(currentValue, props)`.
- `resetValue`: sets value to the `initialValue` prop
- `clearValue`: sets value to `undefined`

#### State
- `value {any}`: the current value in the state
npm package: @renderatl/render-go
Description: A cli that allows you to receive updates from the Render-Atlanta family of events
Author: Justin E. Samuels for @RenderATL
Latest version: 1.0.1

# Render-Go

## Introduction

Ever wonder what the Render-Atlanta family of brands is up to, looking for a new job, or want discount codes to our and partners' next events? This CLI is for you!

With a few keystrokes, you'll be able to:
- Find a new job
- See our upcoming events
- Get your discount code to our next event and partner opportunities 


## Code Samples

  render promo  //  get a promo code to our next conference

  render events   // show upcoming events

  render careers // submit your information to be connected with our recruiting
                  partners 

## Installation

npm i @renderatl/render-go