This is a Kotlin Multiplatform project targeting Web.

the main purpose of the project is make the HTML and COMPOSE WEB interop

How to install

1. Add it in your root build.gradle at the end of repositories

    dependencyResolutionManagement {
       repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
       repositories {
              mavenCentral()
              maven { url 'https://jitpack.io' }
       }
    }

2. Add the dependency

    dependencies {
        implementation("com.github.Hamamas:Kotlin-Wasm-Html-Interop:Version")
    }

3. Add this to your index.html

   <div id="components"></div>

4. Provide the root element in this case is the div we added on the index

   CompositionLocalProvider(LocalLayerContainer provides document.getElementById("components")!!)

5. Add Html view

    HtmlView(
       modifier = Modifier.fillMaxWidth().height(300.dp),
       factory = {
           val video = document.createElement("video")
           video.setAttribute(
               "src",
               "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
           )
           video
       }
   )

AnimatedVisibility

    var visibility by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.spacedBy(12.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Button(onClick = { visibility = visibility.not() }) {
            Text(if (visibility) "Hide video" else "Show video")
        }
        AnimatedVisibility(visibility) {
            HtmlView(
                modifier = Modifier.fillMaxWidth().height(300.dp),
                factory = {
                    val video = document.createElement("video")
                    video.setAttribute(
                        "src",
                        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
                    )
                    video
                }
            )
        }
    }

LazyColumn

    LazyColumn(modifier = Modifier.fillMaxSize()) {
        items(50) {
            if (it % 2 < 1) {
                HtmlView(
                    modifier = Modifier.size(100.dp).background(randomColor),
                    factory = {
                        val element = document.createElement("h3")
                        element.textContent = "index $it"
                        element
                    }
                )
            } else {
                Box(
                    modifier = Modifier.size(100.dp).background(randomColor),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "index $it")
                }
            }
        }
    }

LazyRow

    LazyRow(modifier = Modifier.fillMaxSize()) {
        items(50) {
            if (it % 2 < 1) {
                HtmlView(
                    modifier = Modifier.size(100.dp).background(randomColor),
                    factory = {
                        val element = document.createElement("h3")
                        element.textContent = "index $it"
                        element
                    }
                )
            } else {
                Box(
                    modifier = Modifier.size(100.dp).background(randomColor),
                    contentAlignment = Alignment.Center
                ) {
                    Text(text = "index $it")
                }
            }
        }
    }