-
Notifications
You must be signed in to change notification settings - Fork 164
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
More examples #13
Comments
kotlin-fullstack-example uses their own fork of what kotlin-wrappers were before they actually were a thing =) Now you can do this:
Then, to add some typesafety, you can replace
This is exactly the way to add child components by now (we can change it to
You can find one in CRKA templates: https://github.com/JetBrains/create-react-kotlin-app/blob/master/packages/react-scripts/template/src/ticker/Ticker.kt I agree that we should add such examples to |
Thanks a lot that was really useful!
In the provided example on the frontpage, the welcome function accepts only one parameter, so I can't provide a function as a second one (the body where in my example the div were added). Of course I can expand my function to accept an fun RBuilder.welcome(childrenBuilder: RBuilder.()->Unit) = child(WelcomeComponent::class) {
this.childrenBuilder()
} |
This code assumes that you have WelcomeComponent class component declared. You can actually omit
Actually, you can pass not only children, but also props in that handler. So let's change its name to something more generic, and the type to
In fact, it can be simplified to just
There's still a question how to consume the children in your class component. Of course, you can read it from
If you don't use a class component, you can do this:
|
Echo for add more examples, such as to cover the reactjs tutorial:) Thanks. |
Here is a simple Todo list sample: |
@ScottHuangZL I've edited your message to point to your PR (hope you don't mind) |
@Hypnosphi NP. |
Add one sample to implement react TicTacToe tutorial. Store the state in board level only in this example. Will provide further example to put state at game level soon. |
Complete the full function TicTacToe tutorial sample. Hope @Hypnosphi or @Leonya accept the pull request :) thanks. Suggest both keep that 2 versions, 1st one for basic, and 2nd version for basic plus. |
This is a port of https://reactjs.org/docs/thinking-in-react.html |
Hi, I would like to ask about React Stateless Components, e.g.: const Username = function(props) {
return (
<p>The logged in user is: {props.username}</p>
)
} I could produce something similar with kotlin-wrappers: override fun getComponentForKey(key: String): (props: dynamic) -> dynamic {
return { props ->
buildElements({
span {
childList.addAll(React.Children.toArray(props.children)) // ??
}
})
}
} This method implements an interface from DraftJs, and has to return a React component. My first question: is this implementation(using the buildElements) the right way to do this? |
Yes, if some external library expects actual react elements, using
|
@bbodi Actually, I found a way to make it work like that:
It works since |
@Hypnosphi I try to import an example from https://www.npmjs.com/package/react-quill Main code as below. And I try call it in app.kt as However, when I try change the content in the editor, it show error in the console as: Is it caused by the onChange need bind to this? Can you shed a light for how to resolve the issue. ===main code as below ======
|
It should be |
It works! Thanks @Hypnosphi for your always help.
|
@Hypnosphi Can you add some articles/blogs to deep dive the kotlin-wrapper & kotlin-react? And then you can close this issue accordingly? Thanks. |
@prigara do we have any? |
@Hypnosphi, @ScottHuangZL unfortunately, we don't have any articles or tutorials yet. Maybe we should add a link to the Koltin JavaScript docs? |
guys, how can i run examples from the examples folder? what gradle command should i use to start the frontend? |
There are currently no setup to run the examples, you can only build them |
ReactSomething {
attrs {
foo = "bar"
}
// will be passed as children
+"Hello"
} This works perfectly. But can i still use attrs in dynamic way when import react components like this? @JsModule("react-something")
external val ReactSomething: RClass<dynamic> In built-in tags like |
Right now, this should work:
We can find a better way to do that though. Basically, what's needed is to add an extension function |
thanks. this one did the trick: operator fun RProps.set(key: String, value: dynamic) {
asDynamic()[key] = value
} |
@deviant-studio you can try the example from https://github.com/ScottHuangZL/my-kotlin-app |
I've been trying to create headers for the I write the header for /**
* Headers for the react-google-maps JS library
*/
@file:JsModule("react-google-maps")
package jsheaders
import react.*
import kotlin.js.Json
external val GoogleMap : RClass<RGMapProps>
external interface RGMapProps : RProps {
var defaultZoom : Int
var defaultCenter : Json
} as explained before. How do I write the header for the HOCs ? I thought it would be intuitive to do external fun withGoogleMap(component: ReactElement) : ReactElement and defining my map component with fun RBuilder.myMapComponent() {
withGoogleMap(GoogleMap {
attrs {
defaultZoom = 15
defaultCenter = json(
"lat" to -34.397,
"lng" to 150.644
)
}
})
} would work. But I still get the error
as if wrapping failed. Now, there's an interface named external val withGoogleMap : HOC<RProps, RGMapProps> right ? |
Okay, I got a bit further by defining external val withGoogleMap : (RClass<RGMapProps>) -> RClass<RGMapProps> and defining my map component as fun RBuilder.myMapComponent() {
println(withGoogleMap.toString())
withGoogleMap(GoogleMap)({
attrs.defaultCenter = luxembourgCenter
attrs.defaultZoom = 15
})
} Though I would've liked to understand how the HOC interface works. |
yes, this one should work |
How should I use it, then ? Doing withGoogleMap(GoogleMap) { } does not work... |
What's the error? |
IntelliJ warns me about an unresolved reference, which the compiler also returns : Unresolved reference.
|
What's the type of |
external val GoogleMap : RClass<RGMapProps> as above. |
I think it might be a problem with how I use // MyMapComponent.kt
package app
import jsheaders.reactgooglemaps.*
import react.RBuilder
import kotlinext.js.*
import kotlinx.html.style
import react.dom.div
import kotlin.js.json
val augmentedGoogleMap = withGoogleMap(GoogleMap) @file:JsModule("react-google-maps")
package jsheaders.reactgooglemaps
import react.*
import kotlin.js.Json
external val GoogleMap : RClass<RGMapProps>
external val withGoogleMap : HOC<RGMapProps, RWithGMapProps>
external val withScriptjs : HOC<RWithGMapProps, RWithScriptjsProps>
external interface RGMapProps : RProps {
var defaultZoom : Int
var defaultCenter : Json
}
external interface RWithGMapProps : RGMapProps {
var containerElement : ReactElement
var mapElement : ReactElement
}
external interface RWithScriptjsProps : RWithGMapProps {
var googleMapURL : String
var loadingElement : ReactElement
} |
Weird, for me it compiles without an error. Which versions on Kotlin and |
I am using Kotlin 1.2.31 and |
It seems importing |
|
Yes it does! I'm thinking of providing my wrapper for |
Are there any examples of how to import methods defined in React components ? |
Which components expect you to do that? They really shouldn’t |
The |
Is its usage (in JS) documented somewhere? |
Yes, here https://tomchentw.github.io/react-google-maps/#googlemap |
OK, you should be able to do something like this:
Or, using React 16.3 and kotlin-react 16.3.1-pre.27:
|
Thanks, I wrote my Just so I understand, what you're doing with withGoogleMap(GoogleMap)({
ref = mapRef
}) is passing a lambda to the composed GoogleMap component, with RWithGoogleMap props ? |
Here I'm using new createRef feature: https://reactjs.org/blog/2018/03/29/react-v-16-3.html#createref-api |
Can you provide please more examples.
E.g.
In the kotlin-fullstack-example there is an
open class ReactExternalComponentSpec<P : RProps>(val ref: dynamic)
class for imporing React components from external modules.How can I achieve the same with kotlin-react?
How can I add children components to a component using DSL, like
Thanks!
The text was updated successfully, but these errors were encountered: