npm package: @flownet/form-iframe
Description: This project provides a straightforward solution for embedding and displaying content within an iframe using React. It utilizes a reusable component that makes integrating external web pages or applications into your React application both simple and effi
Latest version: 0.1.19

# @flownet/form-iframe

This project provides a straightforward solution for embedding and displaying content within an iframe using React. It utilizes a reusable component that makes integrating external web pages or applications into your React application both simple and efficient.

## How It Works

The `@flownet/form-iframe` project primarily functions as a React component that wraps iframe functionality. By using this component, users can seamlessly embed external content, such as web pages, multimedia, or services, into their React applications without manually handling iframe HTML tags and attributes.

## Key Features

- **Easy Integration**: Embed an iframe with minimal setup by simply passing the desired URL through the `src` prop.
- **Responsive Design**: The iframe is designed to occupy the full width and height of its container, adjusting dynamically to ensure the best possible display on any device.
- **Full-Screen Support**: Users can enjoy content in full-screen mode, thanks to the iframe's fullscreen capabilities.
- **Comprehensive Permissions**: The component includes necessary permissions to enhance the user experience, such as autoplay, clipboard write, and media controls.

## Conclusion

`@flownet/form-iframe` offers a practical and minimalistic approach to embedding iframes within React applications. It serves as a handy tool for developers needing to incorporate external content into their projects with ease and flexibility.


# @flownet/form-iframe Developer Guide

## Overview

The `@flownet/form-iframe` library provides a simple and efficient way to embed iframes into your React projects. By leveraging this library, developers can easily integrate external content such as forms, videos, and more into their applications. The key feature of this library is its ability to create responsive iframe components with minimal setup.

## Installation

To install the `@flownet/form-iframe` library in your project, you can use either npm or yarn. Run one of the following commands in your project directory:

Using npm:
```bash
npm install @flownet/form-iframe
```

Using yarn:
```bash
yarn add @flownet/form-iframe
```

## Usage

To use the `@flownet/form-iframe` library, import it into your React component and provide it with the necessary props. The primary prop to pass is `src`, which specifies the URL of the content you want to display within the iframe.

### Example

Below is an example of how to use `@flownet/form-iframe` to embed an external form into your application:

```jsx
import React from 'react';
import FormIframe from '@flownet/form-iframe';

const MyApp = () => {
  return (
    <div style={{ width: '600px', height: '400px' }}>
      <FormIframe src="https://example.com/form" />
    </div>
  );
};

export default MyApp;
```

## Examples

Here are some typical use cases where `@flownet/form-iframe` can be used effectively:

1. **Embedding a YouTube Video:**

   ```jsx
   import React from 'react';
   import FormIframe from '@flownet/form-iframe';

   const VideoEmbed = () => (
     <div style={{ width: '100%', height: '500px' }}>
       <FormIframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" />
     </div>
   );

   export default VideoEmbed;
   ```

2. **Displaying a Survey Form:**

   ```jsx
   import React from 'react';
   import FormIframe from '@flownet/form-iframe';

   const SurveyForm = () => (
     <div style={{ width: '700px', height: '500px' }}>
       <FormIframe src="https://surveysite.com/surveyform" />
     </div>
   );

   export default SurveyForm;
   ```

## Acknowledgement

The `@flownet/form-iframe` library relies on the flexibility of React for rendering components seamlessly. Special thanks to the React community for their ongoing contributions and support.



# Input Schema
```yaml
$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  src:
    type: string
    description: URL loaded into the iframe
    format: uri
  allow:
    type: string
    description: Permissions for iframe content
    default: accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
      picture-in-picture; web-share
  allowFullScreen:
    type: boolean
    description: Enables full screen mode for the iframe
    default: true
  style:
    type: object
    description: CSS styles for the iframe
    properties:
      width:
        type: string
        description: Width of the iframe
        default: 100%
      height:
        type: string
        description: Height of the iframe
        default: 100%
      border:
        type: string
        description: Border style of the iframe
        default: none
    additionalProperties: false
required:
  - src
additionalProperties: false

```