Add support for themes about react-jsonschema-form HOT 7 CLOSED

After some discussion with @n1k0, we found out that this was a very ambitious project, and (maybe?) out of scope for this lib.

At the same time, we do acknowledge that there's a need for:
1/ a better styling by default
2/ the possibility to customize the theme

To answer 1/, we're going to choose a css framework that we'll use by default. See #99

To answer 2/, we need to add a clear statement in the documentation that we're not going to support theming, and then link to the customization API documentation, explaining how to apply different styles. See #98

from react-jsonschema-form.

Putting this here since I was thinking about it: since most of the theming will be done using html, should we have our default components load their templates from an external file instead, which could be looked up at different locations ? As such theme authors would just need to specify a set of files which would contain only JSX.

The approach you're proposing seems more powerful, but also introduces a bit more complexity. If theme authors are able to cope with it, then doing this is probably a good idea.

from react-jsonschema-form.

should we have our default components load their templates from an external file instead

What format would use this external template file, jsx? How would we load/parse it? How would it look? Could you write a quick example?

from react-jsonschema-form.

I found the current SchemaField connection to not be enough for bootstrap integration. Here is a gist of what I currently have for bootstrap theming SchemaField: https://gist.github.com/zbyte64/67a06857d236e42e852d

The issue I am seeing is that the FieldComponent does not accept className and bootstrap wants inputs to have form-control class name.

from react-jsonschema-form.

So, I've spent some time read things that already exist in this area. React-Template is one, but I'm not a big fan of having control structures directly in the XML tags.

My thinking was coming directly from the python world, where we would have templates like this (jinja2 syntax):

{% if variable == "test"%}
<Component>
// more jsx here
</Component>
{% endif %}

And in the components you would just pass the attributes to be used:

return render("template_name", attributes);

One equivalent in JS seems to be defined by this solution

from react-jsonschema-form.

@zbyte64

The issue I am seeing is that the FieldComponent does not accept className and bootstrap wants inputs to have form-control class name.

Interesting, that's a good use case for ui:widget options so we could pass classNames to the widget as well:

{
  "foo": {
    "ui:widget": {
      "name": "updown",
      "classNames": "foo-class"
    }
  }
}

But for bootstrap it needs more than just classNames here and there, it also has high expectations on specific tags nesting :/

from react-jsonschema-form.

@almet Using external pure-JSX templates seems odd to me, and these could easily just be simple functional components if you ask me (basically what's my suggestion above is). As for the python-like string-based template engine, I don't feel it, like, at all (react users using a react lib are likely to expect to use react syntax to achieve things) :)

from react-jsonschema-form.