How can we change JSX expression delimiters for some of our components?

332
March 08, 2017, at 10:53 PM

How can we change the JSX javascript expression delimiters?

For now JSX uses { and } as expression delimiters, but how could we change this delimiters for some of our components? For example, how could we write expressions like ${ 1+1 } or {{ 1+1 }} instead of { 1+ 1}?

The main motivation for this is to use the power of JSX to not just create powerfull HTML-JS-like components but to create CSS-JS-like components too.

For example, I wrote this example in codepen:

function Style(props) {
  return <div>
    <h1>
      {props.children}
    </h1>
    <style>
      {props.children}
      h1 {'{'}
        color: {props.color};
      {'}'}
    </style>
  </div>;
}
ReactDOM.render(
  <Style
    color="white"
  >
    * {'{'}
      background-color: red;
    {'}'}
  </Style>,
  document.getElementById('root')
);

This works fine and it's awesome. I think we can create very interesting things with this strategy, for example, do several complex calculations to achive some powerfull style that even css or scss (for example) can't give it to us. We can use the full power of javascript to write our styles if we need this.

But this example will be more readable if JSX just have a little new option to parse expressions using another delimiters like the listed ones above. For example, we could write the same code like this:

function Style(props) {
  return <div>
    <h1>
      ${props.children}
    </h1>
    <style>
      ${props.children}
      h1 {
        color: ${props.color};
      }
    </style>
  </div>;
}
ReactDOM.render(
  <Style
    color="white"
  >
    * {
      background-color: red;
    }
  </Style>,
  document.getElementById('root')
);

So, how can we change the expression delimiters? Or how can we extend JSX to have this behavior for some special of our components (like Style above)?

Note

This is a simple working example and proposal. It is not to use in all cases and not a proposal to always create html, css and js in the same file. The motivation for this is, when needed, we could bring the javascript power to create our styles, maybe you, as me, could sometimes achieve some result easily with a javascript expression but even in Sass you couldn't. So, I think the approach to bring the javascript power when creating styles will be extremely valid for some cases.

READ ALSO
Absolute positioned div inside another absolute positioned div is not stretching by content

Absolute positioned div inside another absolute positioned div is not stretching by content

I have two div elements with "position: absolute" css rule setInside the child div there are two floated div elements

299
How to center website content (body and navigation bar) in rtd sphinx?

How to center website content (body and navigation bar) in rtd sphinx?

I am creating documentation using the Read the Docs theme for Sphinx documentationI am trying to center the entire webpage - both the body and the left navigation bar, such that if the width of the window increases, the margin on both the left and the right sides increases...

333
No shadow on absolutely positioned View/Image?

No shadow on absolutely positioned View/Image?

I did a materalistic designed "Add" button on my Android-primary react-native appWhile I used elevation style property as a primary source for shadows in the rest of the elements, I've discovered that it stops working when applied to an absolute positioned...

259