mainframeos / react-json-renderer Goto Github PK

Hello,

I've been playing about with this tool and think I may be either misunderstanding it or have found a bug.

In the example below I've converted a component to an object and then an object to a component but it doesn't seem to work.

import React, { Component } from 'react';
import { convertToObject, renderFromObject } from 'react-json-renderer'

const ToBeConvereted = () => <span>Hello</span>;
const toJson = convertToObject(<ToBeConverted />);
const ToObject = renderFromObject(toJson);

class App extends Component {
  render() {
    return (
      <div>
        <ToObject />
      </div>
    );
  }
}

export default App;

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

I'm sure you're thinking "dafuq?", but I thought renderFromObject would return a renderable component, and now I'm kid of confused as to what it is supposed to do.

Thanks!

Anth

I'm sorry, I know GitHub issues aren't the place for implementation help requests, but I'm trying to convert react-native-svg components to JSON, but I just get {"type":"Unsupported","props":{"children":[]}}

I'm trying to convert the following:

<Svg
  height={170}
  viewBox="0 0 100 170"
  width={100}
>
  <Path d="M100 0H50v85l50-85z" fill="#000" />
  <Path d="M0 170h50V85L0 170z" fill="#fff" />
</Svg>

Any help would be greatly appreciated.

Would be nice to be able to have hydrate and dehydrate callbacks for custom components/classes on convert/render (render basically already accepts a map, might be nice if it was a Map()).

Use case:
I'm working on something that allows you to call reduce on a page to decorate/add ui traits to an existing webpage, so a chrome extension could for example add resize handlers to all components or something.

I can prolly submit a PR, but I figured I'd ask on how you think it should look/be implemented first.

I'm trying to convert a component that's wrapped in the connect method from react-redux.

The error I'm getting is cannot call a class as a function in Route.js

var props = processProps(tree.props); if (type === 'function') { return convertComponent(tree.type(props), key); }