https://github.com/d8corp/innet-to

innet plugin to switch JSX Elements type
https://github.com/d8corp/innet-to

Last synced: about 1 year ago
JSON representation

innet plugin to switch JSX Elements type

• Host: GitHub
• URL: https://github.com/d8corp/innet-to
• Owner: d8corp
• License: mit
• Created: 2021-01-05T15:03:28.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2021-06-17T20:13:22.000Z (about 5 years ago)
• Last Synced: 2025-03-15T15:06:55.323Z (over 1 year ago)
• Language: JavaScript
• Size: 68.4 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          


#   @innet/to

 

[![NPM](https://img.shields.io/npm/v/@innet/to.svg)](https://github.com/d8corp/innet-to/blob/master/CHANGELOG.md)

[![minzipped size](https://img.shields.io/bundlephobia/minzip/@innet/to)](https://bundlephobia.com/result?p=@innet/to)

[![downloads](https://img.shields.io/npm/dm/@innet/to.svg)](https://www.npmjs.com/package/@innet/to)

[![license](https://img.shields.io/npm/l/@innet/to)](https://github.com/d8corp/innet-to/blob/master/LICENSE)

This plugin helps to change types of JSX Elements.

### Installation

npm

```bash

npm i @innet/to

```

yarn

```bash

yarn add @innet/to

```

Or you can include the scripts into the `head`.

```html

```

### Using

You can change each element to another.  

For example `div` to `span`:

```typescript jsx

import innet from 'innet'

import to from '@innet/to'

import app from './app'

innet(app, undefined, {div: to('span')})

```

`app.tsx`

```typescript jsx

import innet from 'innet'

export default (

  


    


  

)

```

You will get

```html



  



```

You can use `Template` or `Component` as the argument

```typescript jsx

function Link (props, children) {...}


innet(
click me
, undefined, {

  a: to(Link)

})

```

Any `a` element will be switched to `Link` template.


Also, you can change only peace of application with [@innet/plugins](https://www.npmjs.com/package/@innet/plugins)

```typescript jsx

import innet from 'innet'

import to from '@innet/to'

import plugins from '@innet/plugins'

function Link (props, children) {...}

function PeaceOfApp (props, children) {

  return (

    {children}

  )

}

innet((

  <>

    usual link

    

      custom link

    

  >

), undefined, {plugins})

```

### Issues

If you find a bug or have a suggestion, please file an issue on [GitHub](https://github.com/d8corp/innet-to/issues).  

[![issues](https://img.shields.io/github/issues-raw/d8corp/innet-to)](https://github.com/d8corp/innet-to/issues)

> ---

[![stars](https://img.shields.io/github/stars/d8corp/innet-to?style=social)](https://github.com/d8corp/innet-to/stargazers)

[![watchers](https://img.shields.io/github/watchers/d8corp/innet-to?style=social)](https://github.com/d8corp/innet-to/watchers)