open-index/open-npm huggingface dataset:
npm package: @nelreina/json-tree-viewer
Description: A Svelte component for visualizing JSON data in a tree structure.
Author: Nel Reina
Latest version: 0.0.1

# create-svelte

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.

## Building

To build your library:

```bash
npm run package
```

To create a production version of your showcase app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

## Publishing

Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).

To publish your library to [npm](https://www.npmjs.com):

```bash
npm publish
```
npm package: @nelreina/nr-svelte
Description: Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
Latest version: 0.0.8

# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm init svelte@next

# create a new project in my-app
npm init svelte@next my-app
```

> Note: the `@next` is temporary

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:

```bash
npm run build
```

> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
npm package: @nelreina/react-hooks
Description: Utility component to loop throuhgt a array or object
Author: @nelreina
Latest version: 3.2.12

# @nelreina/react-list

version 2.0.0
Utility Component to render an iterator(Array of objects)

## List with an "item" prop

```javascript
const data = ['one', 'two', 'three'];
const Button = ({ item }) => <button>{item}</button>;

// Use List Component
// Notice the button component has an "item' prop
// By default List component expect an item prop

<List of={Button} iterator={data} />;
```

### Will render

```html
    <button>one</button>
    <button>two</button>
    <button>three</button>
```

## List with a custom propname

```javascript
const navs = ['Home', 'About', 'Contact'];

const NavLink = ({ display }) => <li>{display}</li>;

// just add a custom "propname" prop to List Component
render () {
    return (
        <ul>
            <List of={NavLink} iterator={navs} propname="display" />
        </ul>

    )
}
```

### Will render

```html
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>
```
npm package: @nelreina/react-list
Description: Utility component to loop throuhgt a array or object
Author: @nelreina
Latest version: 3.2.0

# @nelreina/react-list

version 2.0.0
Utility Component to render an iterator(Array of objects)

## List with an "item" prop

```javascript
const data = ["one", "two", "three"];
const Button = ({ item }) => <button>{item}</button>;

// Use List Component
// Notice the button component has an "item' prop
// By default List component expect an item prop

<List of={Button} iterator={data} />;
```

### Will render

```html
    <button>one</button>
    <button>two</button>
    <button>three</button>
```

## List with a custom propname

```javascript
const navs = ['Home', 'About', 'Contact'];

const NavLink = ({ display }) => <li>{display}</li>;

// just add a custom "propname" prop to List Component
render () {
    return (
        <ul>
            <List of={NavLink} iterator={navs} propname="display" />
        </ul>

    )
}
```

### Will render

```html
<ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
</ul>
```
npm package: @nelreina/react-redux-form
Description: Abstraction of redux-form
Author: @nelreina>
Latest version: 3.5.8

# nr-react-form

version 2.0.0
Utility package using redux-form for creating Forms

# NOTE V5.\*

I renamed some of the Objects to make the library more generic.

# Why

Redux form is Awesome but the api have a lot of boilerplate code.
I found myself creating the same form over and over again. I needed a simpler Api.
So I aproach this from a data-structure view point, and created an Api for the most common use cases.

```javascript
{
    firstName: {type: 'text'},
    lastName: {type: 'text'},
}
```

View the
[Demo Site nr-react-form](https://nelreina.github.io/nr-react-form/)
for examples.

# Todo:

- Form works with Bootstrap but must be css library independend
- Support for other input types like textarea, radiobutton etc... Target next version
- Field Array validation
- API Documentation
npm package: @nelreina/react-scripts
Description: @nelreina Configuration and scripts for Create React App.
Latest version: 3.5.8

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

- [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
- [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.