Port to React

[yuanchuan]

Current workaround:

It's not the best way, but if you want to use css-doodle in React you could try the following:

/* doodle.js */

import React from 'react';
import 'css-doodle';

export default ({ rule = '' }) => (
  <css-doodle>{ rule }</css-doodle>
)

/* example.js */

import Doodle from './doodle';

<Doodle rule={`
  :doodle {
    @grid: 2 / 200px;
    grid-gap: 1px;
  }
  background: @pick(red, pink);
`}/>

Better way:

Just use it directly!

import 'css-doodle';

function App() {
  return (
    <css-doodle>{`
      :doodle {
        @grid: 2 / 200px;
        grid: 1px;
      }
      background: @pick(red, pink);
    `}</css-doodle>
  );
}

[hiteshsahu]

Sample https://codesandbox.io/s/vjjq6686y0

[yuanchuan]

@hiteshsahu Thank you :D

[simonmarton]

I think a template string helper would be nice too, similar to styled-components.
Something like this:

/* doodle.js */

import React from 'react';
import 'css-doodle';

export default ([ rule = '' ]) => () => (
  <css-doodle>{ rule }</css-doodle>
);

/* example.js */

import Doodle from './doodle';

const FancyDoodle = Doodle`
  :doodle {
    @grid: 2 / 200px;
    grid-gap: 1px;
  }
  background: @pick(red, pink);
`;

...

<FancyDoodle />

[yuanchuan]

@simonmarton Nice!

[yuanchuan]

No need to wrap around. Just use it directly!

import 'css-doodle';

function App() {
  return (
    <css-doodle>{`
      :doodle {
        @grid: 2 / 200px;
        grid: 1px;
      }
      background: @pick(red, pink);
    `}</css-doodle>
  );
}

[papan01]

Does this support tsx?

[yuanchuan]

@papan01 Nope

[Mizumaki]

@papan01

Does this support tsx?

I don't know the support means, but I use <css-doodle> in Doodle.tsx, and it works.

First, you need to extend JSX.IntrinsicElements interface.

declare namespace JSX {
  interface IntrinsicElements {
    'css-doodle': {}
  }
}

And then, you can use <css-doodle>. (Unfortunately, it seems that there is no type definition yet.)

import React from 'react';
import 'css-doodle';

const Doodle: React.FunctionComponent = () => {
  // code is referenced from https://alligator.io/css/patterns-css-doodle/
  return (
    <css-doodle>
      {`
      :doodle {
        @grid: 5x8 / 100% 15rem;
      }
      :after {
        content: "@index()"
      }
      background: pink;
      margin: .5rem;
    `}
    </css-doodle>
  );
};

export default Doodle;

hmm.
Really nice 🥰

[papan01]

@Mizumaki That’s right! Thank you 🙇

[Alfxjx]

import React from "react";

const Doodle = (rule) => () => {
	React.useEffect(() => {
		const script = document.createElement("script");
		script.src = "https://unpkg.com/css-doodle@0.20.2/css-doodle.min.js";
		document.body.appendChild(script);
	}, []);
	return <css-doodle>{rule}</css-doodle>;
};

export { Doodle };

use next.js and css-doodles

[vitpankin]

For Typescript I had to add

declare global {
   declare namespace JSX {
      interface IntrinsicElements {
      'css-doodle': {}
    }
  }
}

[surajsharma]

anyone tried this with react-native?