Add guide for creating CxJS components

[mstijak]

Explain all steps for creating new CxJS components and associated concepts.

[chris77ve]

I would like to know how to create a new CxJS wrapper for react-leaflet just like cx-google-maps has been written for react-google-maps.

[chris77ve]

Is there a way to create a CxJS component from Leaflet without having to write an entire wrapper for react-leaflet? I just want to insert a Leaflet map inside <cx> ... </cx>.

[mstijak]

@chris77ve I was curious about Leaflet too, so I made a quick POC. You can see it here: https://codesandbox.io/s/zll15v2ozx

I couldn't make markers to render (relative paths), but it was relatively straightforward for circles.

Creating complex components is a tricky job which requires good understanding of framework internals and we need to address that much better in our documentation.

[chris77ve]

Thank you so much for your answer! I managed to render the marker in my CxJS app, I just had to use url-loader in webpack.config.js like this: ... module: { loaders: [{ test: /.js$/, //add here any ES6 based library include: /\/[\/]/, loader: 'babel-loader', query: babelCfg }, { test: /.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

    ]
}

... ...and put "import 'leaflet/dist/leaflet.css'" in my index.js.

But the marker's position is always the same regardless the coordinates I put as arguments (maybe the component is not complete), and its precise position varies as the zoom level changes.

[mstijak]

Yep, Marker is not complete in the example. You can see how position works for Circle and apply the same logic.

On Fri, Jan 4, 2019, 19:19 chris77ve <[email protected] wrote:

Thank you so much for your answer! I managed to render the marker in my CxJS app, I just had to use url-loader in webpack.config.js like this: ... module: { loaders: [{ test: /.js$/, //add here any ES6 based library include: //[/]/, loader: 'babel-loader', query: babelCfg }, { test: /.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(?[a-z0-9=.]+)?$/, loader: 'url-loader?limit=100000' }

]

}

... ...and put "import 'leaflet/dist/leaflet.css'" in my index.js.

But the marker's position is always the same regardless the coordinates I put as arguments (maybe the component is not complete), and its precise position varies as the zoom level changes.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/codaxy/cxjs/issues/405#issuecomment-451525120, or mute the thread https://github.com/notifications/unsubscribe-auth/AAac8lqFaMWX8j5IZrvDqLb8idcOUgrEks5u_5ssgaJpZM4TGmPG .