how to render a raised paper-button with reactjs?

Question

Here is the code that should render a "raised" paper-button:

All the code is in a script tag and renders a paper-button that is not RAISED (see screen shot). I can click and see the RIPPLE effect, seems perfect except the appearance.

UPDATE : for the moment the only way to get the correct rendering is by replacing

<paper-button raised>test</paper-button>

BY

<div dangerouslySetInnerHTML={{__html: '<paper-button raised>test</paper-button>'}} />

ANY WORKAROUND avoiding this 'dangerous' way?

<!DOCTYPE html>
<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/paper-button/paper-button.html">
    <title>Hello React</title>
    <script src="bower_components/react/react.min.js"></script>
    <script src="bower_components/react/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="content">
    </div>

    <script type="text/jsx">
        var ButtonT = React.createClass({

            render: function() {
                return (
                <div>
                    <paper-button raised="true">test</paper-button>
                </div>
                );
            }

        });
        React.render(
          <ButtonT />,
          document.getElementById('content')
        );

    </script>
  </body>
</html>

Should the "raised" attribute be passed as a this.props...?

You can't pass custom attributes: https://github.com/facebook/react/issues/140. — WiredPrairie, Mar 31 '15 at 00:15
possible duplicate of [True custom attributes (e.g. Microdata) in React](http://stackoverflow.com/questions/21648347/true-custom-attributes-e-g-microdata-in-react) — WiredPrairie, Mar 31 '15 at 00:16

score 0 · Answer 1 · answered Mar 30 '15 at 22:27

0

In JSX if you want a custom HTML attribute, you should prefix it with data-, it then will be resolved to actual name without prefix. See docs;

answered Mar 30 '15 at 22:27

Roman Liutikov

1,338
10
17

1

No, it doesn't. It would be included as `data-raised` on the element. So unless the Polymer component could use that, it wouldn't work. – WiredPrairie Mar 31 '15 at 00:14
Unfortunately, that doesn't work and won't solve the question. :( – Con Antonakos Sep 11 '15 at 20:40

score 0 · Accepted Answer · answered Apr 01 '15 at 15:20

0

It won't work in the current version of React. Custom attribute support is an open issue, though. For now, I've found this patch works well.

answered Apr 01 '15 at 15:20

andrewrota

41
4

how to render a raised paper-button with reactjs?

2 Answers2