open-index/open-npm huggingface dataset:
npm package: @revivesoft/inputron
Description: AI Powered building blocks for your forms 🚀! Added auto complete , translation , enhancement and more to your text areas and inputs.
Latest version: 1.5.21

# Inputron

Inputron is a powerful package designed to enhance user input experiences in web applications uding Generative AI. It provides a set of customizable building blocks for react/nextjs forms that can be easily integrated into your projects to improve the way users interaction.

## Features

- **Customizable Components**: Easily tailor the appearance and behavior of input components to fit your needs.
- **Enhanced User Experience**: Improve the usability and accessibility of your forms.
- **Seamless Integration**: Quickly integrate Inputron into your existing projects with minimal effort.

## Installation

To install Inputron, use npm or yarn:

```bash
npm install @revivesoft/inputron

```

or

```bash
yarn add @revivesoft/inputron
```

You must obtain an API Key and Client ID from (https://www.inputron.com)

Edit your .env variables to include the API Key and Client ID

```jsx
INPUTRON_API_KEY=ENTER KEY DETAILS HERE
INPUTRON_ENGINE_API_ENDPOINT=https://api.inputron.com
INPUTRON_CLIENT_ID=ENTER YOUR CLIENT ID
```


## 
Here is an example of how to use the `LabelTron` component from the Inputron package:

```jsx
"use client";
import { LabelTron } from "@revivesoft/inputron";

const ExampleLabelComponent = () => {
  return (
    <LabelTron
      languages={['es', 'fr', 'ar']}
      icon={{
        className: "h-3 text-pink-500",
        visible: true,
      }}
      interval={2000}
      className="text-md font-bold"
    >
      First Name
    </LabelTron>
  );
};

export default ExampleLabelComponent;
```



Here is an example of how to use the `Predictron` component from the Inputron package:

```jsx
"use client";
import { Predictron } from "@revivesoft/inputron";
import React, { useState } from 'react';

const ExamplePredictronComponent = () => {
  const [comments, setComments] = useState('');

  const handleChange = (value) => {
    setComments(value);
  };

  return (
    <Predictron
      name='comments'
      onChange={handleChange}
    />
  );
};

export default ExamplePredictronComponent;
```


Here is an example of how to use the `Selectron` component from the Inputron package:

```jsx
"use client";
import { Selectron } from "@revivesoft/inputron";
import React from 'react';

const ExampleSelectronComponent = () => {
  return (
    <Selectron
      style=""
      title="Cool places"
      prompt="5 beaches in miami"
    />
  );
};

export default ExampleSelectronComponent;
```

## Demonstration
For live examples, please visit our [demonstration site](https://www.inputron.com/demo) 

## Documentation

For more detailed documentation and examples, please visit our [official documentation](https://www.inputron.com/docs).

## Contributing

We appreciate your interest, but we are not accepting contributions at this time.

## License

Inputron is licensed under the [MIT License](#).
npm package: @revivesoft/video-cards
Description: Beautiful Cards with for video animations.
Latest version: 0.4.1

## Installation

npm install @revivesoft/video-cards

## Add to your react/nextjs projects

import { VidedCard } from '@revivesoft/video-cards';

## import css in your project

import "@revivesoft/video-cards/css";

## VidedCard Component

The `VidedCard` component is a beautiful and interactive card that displays an image and a video. The video gets activated on hover, providing an engaging user experience.

You can view examples here https://examples.inputron.com/video-cards

### Features

- **Image and Video Display**: Shows an image by default and plays a video on hover.
- **15 beautiful shapes**: use the shape that best complement the theme of your card.
- **Action Item**: Includes an action item for user interaction.
- **Customizable**: Easily customizable using CSS to fit your design needs.

### Props

The `VidedCard` component accepts the following props:

- `title` (string): The title of the card.
- `description` (string): A brief description displayed on the card.
- `imageUrl` (string): The URL of the image to be displayed.
- `videoUrl` (string): The URL of the video to be played on hover.
- `variant` (star, circle, chat, cloud, heart, mellow, diamond, flower, hexagon, door, pill, pillRight, saw, square, or house)
- `onClick` (function): Callback function to handle the action item click.

### Usage

Here is an example of how to use the `VidedCard` component:

```tsx
import React from 'react';
import "@revivesoft/video-cards/css";

import { VidedCard } from "@revivesoft/video-cards";

const Example = () => {
  const handleAction = () => {
    console.log('button item clicked');
  };

  return (
      <VidedCard
              variant="flower"
              maskImage={"https://examples.inputron.com/images/image1.svg"}
              videoFile={"https://examples.inputron.com/videos/revivesoft.mp4"}
              headerText="FLOWER COVER"
              title="Flower"
              backgroundClass="bg-gradient-to-t from-green-300 to-green-400"
              buttonTextColor="text-green-300"
              sizeClasses="w-full"
              description="Add an artistic flair to your content with a flower shaped ."
              buttonText="GET STARTED"
              onClick={handleAction}
            />
  );
};

export default Example;


```

### About

The `VidedCard` component was created by [ReviveSoft](https://www.revivesoft.net) to enhance user engagement with interactive media elements.