open-index/open-npm huggingface dataset:
npm package: @nvms/react-as-hoc
Description: Transform React components accepting a render prop into a higher-order components
Author: Niko van Meurs
Latest version: 1.0.0

# React as HOC

Transform React components accepting a render prop into a higher-order components.

## Installation

```
npm install react-as-hoc
```

## Usage

Take the following pattern in which a computed value is passed from a Provider component to its render prop:

```
const GreetingProvider = ({ children, name }) => {
  const greeting = name ? `Hello ${name}!` : "Hello!";
  return children({ greeting });
};

const GreetingPresenter = ({ greeting }) => <h1>{greeting}</h1>;

const GreetTheWorld = () => (
  <GreetingProvider name="World">{({ greeting }) => (
    <GreetingPresenter greeting={greeting}>
  )}
);
```

Using react-as-hoc, this can alternatively be written as:

```
import asHoc from 'react-as-hoc';

const GreetingProvider = ({ children, name }) => {
  const greeting = name ? `Hello ${name}!` : "Hello!";
  return children({ greeting });
};

const GreetingPresenter = ({ greeting }) => <h1>{greeting}</h1>;

const withGreeting = asHoc(GreetingProvider);
const GreetTheWorld = withGreeting({ name: "World" })(GreetingPresenter);
```
npm package: @nvogel/typescript-npm-package-template
Description: A template for creating npm packages using TypeScript and VSCode
Author: Nicolas Vogel
Latest version: 1.3.0

# typescript-npm-package-template

> A npm package template using TypeScript

## Features

- [Semantic Release](https://github.com/semantic-release/semantic-release)
- [TypeScript](https://www.typescriptlang.org/)
- [Jest](https://jestjs.io/)
- [ESLint](https://eslint.org/)
- [Prettier](https://prettier.io/)

## Getting started

### Set up your repository

**Click the "Use this template" button.**

Alternatively, create a new directory and then run:

```bash
curl -fsSL https://github.com/nvogel/typescript-npm-package-template/archive/main.tar.gz | tar -xz --strip-components=1
```

Replace `FULL_NAME`, `GITHUB_USER`, and `REPO_NAME` in the script below with your own details to personalize your new package:

```bash
FULL_NAME="John Smith"
GITHUB_USER="johnsmith"
REPO_NAME="my-cool-package"
sed -i.mybak "s/\([\/\"]\)(nvogel)/$GITHUB_USER/g; s/typescript-npm-package-template\|my-package-name/$REPO_NAME/g; s/Nicolas Vogel/$FULL_NAME/g" package.json package-lock.json README.md
rm *.mybak
```

### Add NPM Token

Add your npm token to your GitHub repository secrets as `NPM_TOKEN`.

**Remove everything from here and above**

---

# my-package-name

[![npm package][npm-img]][npm-url]
[![Build Status][build-img]][build-url]
[![Downloads][downloads-img]][downloads-url]
[![Issues][issues-img]][issues-url]
[![Commitizen Friendly][commitizen-img]][commitizen-url]
[![Semantic Release][semantic-release-img]][semantic-release-url]

> My awesome module

## Install

```bash
npm install my-package-name
```

## Usage

```ts
import { myPackage } from 'my-package-name'

myPackage('hello')
//=> 'hello from my package'
```

[build-img]: https://github.com/nvogel/typescript-npm-package-template/actions/workflows/release.yml/badge.svg
[build-url]: https://github.com/nvogel/typescript-npm-package-template/actions/workflows/release.yml
[downloads-img]: https://img.shields.io/npm/dt/typescript-npm-package-template
[downloads-url]: https://www.npmtrends.com/typescript-npm-package-template
[npm-img]: https://img.shields.io/npm/v/typescript-npm-package-template
[npm-url]: https://www.npmjs.com/package/typescript-npm-package-template
[issues-img]: https://img.shields.io/github/issues/nvogel/typescript-npm-package-template
[issues-url]: https://github.com/nvogel/typescript-npm-package-template/issues
[commitizen-img]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg
[commitizen-url]: http://commitizen.github.io/cz-cli/
[semantic-release-img]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release-url]: https://github.com/semantic-release/semantic-release