# @component-controls/render

> framework render functions

Latest version **4.0.3** (published 2022-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @component-controls/render
pnpm add @component-controls/render
yarn add @component-controls/render
bun add @component-controls/render
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2022-01-14 |
| First published | 2020-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 45.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 82 |
| Maintainers | atanasster |

## Links

- npm: https://www.npmjs.com/package/@component-controls/render
- Repository: https://github.com/ccontrols/component-controls
- Issues: https://github.com/ccontrols/component-controls/issues
- npm.io page: https://npm.io/package/@component-controls/render

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^17.0.1
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.1
- [@component-controls/core](https://npm.io/package/@component-controls/core.md) ^4.0.3

## Recent versions

- 4.0.3 (latest) — 2022-01-14
- 3.14.6 — 2021-05-20
- 3.14.5 — 2021-05-19
- 3.14.2 — 2021-05-18
- 3.14.0 — 2021-05-17
- 3.13.0 — 2021-05-17
- 3.12.0 — 2021-05-13
- 3.11.4 — 2021-05-11
- 3.11.0 — 2021-05-10
- 3.10.3 — 2021-05-09
- 3.10.2 — 2021-05-09
- 3.10.0 — 2021-05-08
- 3.9.0 — 2021-04-30
- 3.8.2 — 2021-04-30
- 3.8.0 — 2021-04-29
- … 62 more at https://npm.io/package/@component-controls/render/versions

## README

# Table of contents

-   [Overview](#overview)
-   [Installation](#installation)
-   [API](#api)
    -   [renderers](#renderers)

# Overview

Logging utilities. Uses the [chalk](https://github.com/chalk/chalk#readme) package for logging utput

# Installation

This package is usually installed as part of the @component-controls package, but you can also install it standalone:

```bash
$ npm install @component-controls/logger --save-dev
```

# API

<api-readme />

<!-- START-API-README -->

## renderers

**`type`**

_defined in [@component-controls/render/core/render/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/render/src/index.ts#L6)_

**properties**

| Name     | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `react*` | **function** (<br /><details><summary>`props`\*</summary><blockquote><details><summary>`story`\*</summary><blockquote>`name`\*: `string`<br />`storyName`: `string`<br />`id`: `string`<br />`rawId`: `string`<br />`doc`: `string`<br />`storyFn`: **function** (<br /><details><summary>`controlValues`</summary><blockquote>\[`string`]: `any`</blockquote></details>`context`: `any`<br />) => `Promise` \| `any`<br />`description`: `string`<br />`arguments`: `StoryArgument`\[]<br /><details><summary>`loc`</summary><blockquote><details><summary>`start`\*</summary><blockquote>`line`\*: <br />`column`\*: </blockquote></details><details><summary>`end`\*</summary><blockquote>`line`\*: <br />`column`\*: </blockquote></details></blockquote></details>`source`: `string`<br />`subtitle`: `string`<br />`dynamic`: `boolean`<br />`dynamicId`: `string`<br />`component`: `string` \| `Record`&lt;`string`, `unknown`> \| `ElementType`&lt;`Props`><br />`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br /><details><summary>`controls`</summary><blockquote>\[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`&lt;`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`</blockquote></details><details><summary>`smartControls`</summary><blockquote>`smart`: `boolean`<br />`include`: `string`\[] \| `IncludeFn`<br />`exclude`: `string`\[] \| `IncludeFn`</blockquote></details>`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`</blockquote></details><details><summary>`doc`</summary><blockquote>`title`\*: `string`<br />`type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string`<br />`route`: `string`<br />`date`: `string`<br />`dateModified`: `string`<br />`status`: `"draft"` \| `"published"`<br />`tags`: `string`\[]<br />`keywords`: `string`\[]<br />`description`: `string` \| `JSX.Element`<br />`image`: `string`<br />`author`: `string`<br />`order`: `number`<br />`menu`: `string`<br /><details><summary>`template`</summary><blockquote>`bind`\*: **function** (<br />`props`: `Story`&lt;`Props`><br />) => <details><summary>`Example`&lt;></summary><blockquote>`bind`\*: **function** (<br />`props`\*: <br />) => `Example`&lt;`Props`><br />`source`: `string`<br />`storyName`: `string`<br />`id`: `string`<br />`rawId`: `string`<br />`doc`: `string`<br />`storyFn`: StoryRenderFn<br />`description`: `string`<br />`loc`: CodeLocation<br />`subtitle`: `string`<br />`dynamic`: `boolean`<br />`dynamicId`: `string`<br /><details><summary>`component`</summary><blockquote>`at`\*: </blockquote></details>`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br />`smartControls`: SmartControls<br />`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`<br />`controls`\*: </blockquote></details><br />`source`: `string`<br />`storyName`: `string`<br />`id`: `string`<br />`rawId`: `string`<br />`doc`: `string`<br />`storyFn`: StoryRenderFn<br />`description`: `string`<br />`loc`: CodeLocation<br />`subtitle`: `string`<br />`dynamic`: `boolean`<br />`dynamicId`: `string`<br />`component`: `string` \| `Record`&lt;`string`, `unknown`> \| `ElementType`&lt;`Props`><br />`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br />`smartControls`: SmartControls<br />`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`<br />`controls`: ExampleControls</blockquote></details>`stories`: `string`\[]<br />`source`: `string`<br />`fileName`: `string`<br />`package`: `string`<br />`testFiles`: `string`\[]<br />`testCoverage`: `string`\[]<br />`testData`: `string`<br />`renderFn`: FrameworkRenderFn<br /><details><summary>`data`</summary><blockquote>\[`string`]: </blockquote></details><details><summary>`componentsLookup`</summary><blockquote>\[`string`]: `string`</blockquote></details>`MDXPage`: `any`<br />`isMDXComponent`: `boolean`<br />`parameters`: `any`<br />`component`: `string` \| `Record`&lt;`string`, `unknown`> \| `ElementType`&lt;`Props`><br />`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br /><details><summary>`controls`</summary><blockquote>\[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`&lt;`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`</blockquote></details><details><summary>`smartControls`</summary><blockquote>`smart`: `boolean`<br />`include`: `string`\[] \| `IncludeFn`<br />`exclude`: `string`\[] \| `IncludeFn`</blockquote></details>`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`<br />`navSidebar`: `boolean`<br />`contextSidebar`: `boolean`<br />`fullPage`: `boolean`</blockquote></details><details><summary>`values`</summary><blockquote>\[`string`]: `ComponentControl` \| `any`</blockquote></details>`options`: `any`</blockquote></details>) => `any` |
| `json*`  | **function** (<br /><details><summary>`props`\*</summary><blockquote><details><summary>`story`\*</summary><blockquote>`name`\*: `string`<br />`storyName`: `string`<br />`id`: `string`<br />`rawId`: `string`<br />`doc`: `string`<br />`storyFn`: **function** (<br /><details><summary>`controlValues`</summary><blockquote>\[`string`]: `any`</blockquote></details>`context`: `any`<br />) => `Promise` \| `any`<br />`description`: `string`<br />`arguments`: `StoryArgument`\[]<br /><details><summary>`loc`</summary><blockquote><details><summary>`start`\*</summary><blockquote>`line`\*: <br />`column`\*: </blockquote></details><details><summary>`end`\*</summary><blockquote>`line`\*: <br />`column`\*: </blockquote></details></blockquote></details>`source`: `string`<br />`subtitle`: `string`<br />`dynamic`: `boolean`<br />`dynamicId`: `string`<br />`component`: `string` \| `Record`&lt;`string`, `unknown`> \| `ElementType`&lt;`Props`><br />`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br /><details><summary>`controls`</summary><blockquote>\[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`&lt;`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`</blockquote></details><details><summary>`smartControls`</summary><blockquote>`smart`: `boolean`<br />`include`: `string`\[] \| `IncludeFn`<br />`exclude`: `string`\[] \| `IncludeFn`</blockquote></details>`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`</blockquote></details><details><summary>`doc`</summary><blockquote>`title`\*: `string`<br />`type`: `"story"` \| `"blog"` \| `"page"` \| `"tags"` \| `"author"` \| `string`<br />`route`: `string`<br />`date`: `string`<br />`dateModified`: `string`<br />`status`: `"draft"` \| `"published"`<br />`tags`: `string`\[]<br />`keywords`: `string`\[]<br />`description`: `string` \| `JSX.Element`<br />`image`: `string`<br />`author`: `string`<br />`order`: `number`<br />`menu`: `string`<br /><details><summary>`template`</summary><blockquote>`bind`\*: **function** (<br />`props`\*: <br />) => `Example`&lt;`Props`><br />`source`: `string`<br />`storyName`: `string`<br />`id`: `string`<br />`rawId`: `string`<br />`doc`: `string`<br />`storyFn`: StoryRenderFn<br />`description`: `string`<br />`loc`: CodeLocation<br />`subtitle`: `string`<br />`dynamic`: `boolean`<br />`dynamicId`: `string`<br /><details><summary>`component`</summary><blockquote>`at`\*: </blockquote></details>`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br />`smartControls`: SmartControls<br />`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`<br />`controls`\*: </blockquote></details>`stories`: `string`\[]<br />`source`: `string`<br />`fileName`: `string`<br />`package`: `string`<br />`testFiles`: `string`\[]<br />`testCoverage`: `string`\[]<br />`testData`: `string`<br />`renderFn`: FrameworkRenderFn<br /><details><summary>`data`</summary><blockquote>\[`string`]: </blockquote></details><details><summary>`componentsLookup`</summary><blockquote>\[`string`]: `string`</blockquote></details>`MDXPage`: `any`<br />`isMDXComponent`: `boolean`<br />`parameters`: `any`<br />`component`: `string` \| `Record`&lt;`string`, `unknown`> \| `ElementType`&lt;`Props`><br />`subcomponents`: `Record`&lt;`string`, (`string`, `Record`&lt;`string`, `unknown`>, `ElementType`&lt;`Props`>)><br /><details><summary>`controls`</summary><blockquote>\[`string`]: `ComponentControlText` \| `ComponentControlBoolean` \| `ComponentControlColor` \| `ComponentControlDate` \| `ComponentControlObject`&lt;`P`> \| `ComponentControlButton` \| `ComponentControlOptions` \| `ComponentControlNumber` \| `ComponentControlArray` \| `ComponentControlFiles`</blockquote></details><details><summary>`smartControls`</summary><blockquote>`smart`: `boolean`<br />`include`: `string`\[] \| `IncludeFn`<br />`exclude`: `string`\[] \| `IncludeFn`</blockquote></details>`decorators`: `StoryRenderFn`\[]<br />`plugins`: `any`<br />`category`: `string`<br />`navSidebar`: `boolean`<br />`contextSidebar`: `boolean`<br />`fullPage`: `boolean`</blockquote></details><details><summary>`values`</summary><blockquote>\[`string`]: `ComponentControl` \| `any`</blockquote></details>`options`: `any`</blockquote></details>) => `any`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |

<!-- END-API-README -->

---
_Source: https://npm.io/package/@component-controls/render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._