@codebabel/jsinput/README.md

jsinput composer to collect user data, with prompt or confirm without the syntax to use them, you call function and decide which one to use and just...

#  [![jackal-11-24-v2-32-inverted.png](https://i.postimg.cc/wBPhM5Lv/jackal-11-24-v2-32-inverted.png)]()  CODEBABEL

# jsinput: 2.0.0
## 📃 Description / Descrição
~~~
{EN}

jsinput composer to collect user data, with prompt or confirm without
the syntax to use them, you call function and decide which one to
use and just...

{PTBR}

jsinput compositor para coletar dados do usuário, com prompt ou confirm sem
a sintaxe para usá-los, você chama função e decide qual usar e só...
~~~

![](https://shields.io/badge/JavaScript-F7DF1E?logo=JavaScript&logoColor=000&style=flat-square:)
![](https://img.shields.io/badge/license-MIT-blue)
![](https://img.shields.io/badge/Vue-3-green)
![](https://shields.io/badge/react-black?logo=react&style=for-the-badge:)
![](https://i.postimg.cc/vTZbVqbV/svelte-shield-1150x200.png)


[![](https://i.postimg.cc/kXNDP8ZL/banner.jpg)]()

## 🌐 Content / Conteúdo
* [Installation 💻](#installation)
* [All shortSyntax formats 📊](#formats)
___
* [Using in Vue ![](vue_x16.svg)](#on_vue)
* [Using in Svelte ![](svelte_x16.svg)](#on_svelte)
* [Using in React ![](react_x16.svg)](#on_react)
___
* [Change log 🚨](#changelog)

### installation
## 💻 Installation / Instalação:
> `npm i @codebabel/jsinput`

> `yarn add @codebabel/jsinput`

### ⛔ *update to jsinput-2.0.0 version 1.0.0 is deprecated*
> `npm update @codebabel/jsinput`

### on_vue
## ![](vue_x16.svg) jsinput: `import and use ~> Vue`
~~~html
<!-- src/components/HelloWold.vue: $jsip("Question?"); install jsprint ;) -->
<template>
  <section>
    <button @click="question">PressMe</button>
    <p>{{ value }}</p>
  </section>
</template>

<script>
// Vue usage: $jsip ~> prompt, $jsic ~> confirm,
// ale ~> alert
// console ~> log, inf, war, ero 
import { $jsip, ale, log } from '@codebabel/jsinput';

export default {
  data() {
    return {
      value: ''
    }
  },
  methods: {
    question() {
      const resp =  $jsip("What's your name?");
      this.value = resp;
      ale(resp);
      log(resp);
    }
  }
}
</script>
<style scoped>

</style>
~~~

### on_svelte
## ![](svelte_x16.svg) jsinput: `import and use ~> Svelte`
~~~html
<!-- App.svelte: $jsip("Question?"); install jsprint ;) -->
<script>
  import svelteLogo from './assets/svelte.svg'
  import viteLogo from '/vite.svg'
  import Counter from './lib/Counter.svelte'

  import { $jsip, $jsic, ale, ero, inf, log, war } from '@codebabel/jsinput'
  function question(){
    const name = $jsip("Your name is?");
    ale(name);
  }
</script>

<main>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>
  <section>
    <button type="button" onclick="{question}">PressMe</button>
  </section>
  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">
    Click on the Vite and Svelte logos to learn more
  </p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style>
~~~

### on_react
## ![](react_x16.svg) jsinput: `import and use ~> React`
~~~js
//~> src/App.js: $jsip("Question?"); install jsprint ;)
import './App.css';
import {$jsip, ale, ero} from '@codebabel/jsinput';
function question(){
  const name = $jsip("What's your name?");
  ale(name);
  ero(name);
}

function App() {
  return (
    <>
      <button onClick={question}>PressMe</button>
    </>
  );
}

export default App;
~~~

### with_component
## ![](react_x16.svg) jsinput: with `Component "ClickButton.jsx"`
~~~js
// src/App.js: with component ClickButton
import './App.css';
import {ClickButton} from './components/ClickButton.';

function App() {
  return (
    <>
      <ClickButton/>
    </>
  );
}

export default App;
~~~
~~~js
// src/Components/ClickButton.jsx
import {$jsip, ale, log} from '@codebabel/jsinput';
function question(){
  const name = $jsip("Qual seu nome?");
  ale(name);
  log(name);
}
export function ClickButton(){  
    return(<><button onClick={question}>question</button></>);
}
~~~


### sha256
## Integrity : SHA-256
~~~bash
615d00e200b31eb9c1c1951d2b1a0aedd5c5bd6fcf20d2ccebd922dae5b02a7d
~~~

### formats
## 📊 All shortSyntx formats / Todos os formatos shortSyntx
~~~
war
inf
ero
log

ale    ~> alert
$jsip  ~> prompt
$jsic  ~> confirm
~~~

### changelog
## 🚨 Change Log
|Version| Version Name |   Upgrade Latency     |
|-------|--------------|-----------------------|
| 1.0.0 |   jsinput    |      START LIB        |
| 1.1.0 |   jsinput    |      unpublished      |
| 1.9.9 |   jsinput    | rebuilded unpublished |
| 2.0.0 |   jsinput    |  Vue, Svelte, React   |

## 💜 Thank's 🧡
~~~
{EN}
Thank you for using the jsinput library.
see ya!

{PTBR}
Valeu por usar a biblioteca jsinput.
tmj!
~~~
© Copyright 2024, Codebabel jsinput _`Frontend`_ library.