@codebabel/jsinput v2.0.0

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ó...

🌐 Content / Conteúdo

• Installation 💻
• All shortSyntax formats 📊

• Using in Vue
• Using in Svelte
• Using in React

• Change log 🚨

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

jsinput: import and use ~> Vue

<!-- 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

jsinput: import and use ~> Svelte

<!-- 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

jsinput: import and use ~> React

//~> 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

jsinput: with Component "ClickButton.jsx"

// src/App.js: with component ClickButton
import './App.css';
import {ClickButton} from './components/ClickButton.';

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

export default App;

// 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

615d00e200b31eb9c1c1951d2b1a0aedd5c5bd6fcf20d2ccebd922dae5b02a7d

formats

📊 All shortSyntx formats / Todos os formatos shortSyntx

war
inf
ero
log

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

changelog

🚨 Change Log

💜 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.