@multikassa.com/super-input NPM

Super Input

Современный веб-компонент для ввода текста, который можно использовать с любым JavaScript фреймворком или без фреймворка.

Установка

npm install @multikassa/super-input
# или
yarn add @multikassa/super-input

Использование

Чистый JavaScript/HTML

<script type="module">
  import '@multikassa/super-input'
</script>

<super-input value="123"></super-input>

React

import '@multikassa/super-input'
import { useEffect, useRef, useState } from 'react'

function App() {
  const inputRef = useRef(null)
  const [value, setValue] = useState('')

  useEffect(() => {
    // Добавляем слушатель события input
    const handleInput = (e) => {
      setValue(e.detail.value)
    }
    
    inputRef.current?.addEventListener('input', handleInput)
    
    return () => {
      inputRef.current?.removeEventListener('input', handleInput)
    }
  }, [])

  return (
    <super-input ref={inputRef} value={value}></super-input>
  )
}

Vue

<template>
  <super-input :value="value" @input="handleInput"></super-input>
</template>

<script setup>
import '@multikassa/super-input'
import { ref } from 'vue'

const value = ref('')
const handleInput = (e) => {
  value.value = e.detail.value
}
</script>

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import '@multikassa/super-input'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Важно для работы с веб-компонентами
  bootstrap: [AppComponent]
})
export class AppModule { }

// app.component.ts
@Component({
  template: `
    <super-input [value]="value" (input)="handleInput($event)"></super-input>
  `
})
export class AppComponent {
  value = '';

  handleInput(e: CustomEvent) {
    this.value = e.detail.value;
  }
}

Свойства

Название	Тип	По умолчанию	Описание
value	string	''	Значение input (обязательное)

События

Название	Детали	Описание
input	{ value: string }	Срабатывает при изменении value

Кастомизация

Компонент поддерживает кастомизацию через CSS переменные:

super-input {
  --super-input-border-color: #42b883;
  --super-input-focus-color: #3aa876;
  --super-input-hover-color: #4cc592;
  --super-input-bg-color: #f0faf6;
}