Comments (12)
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 π₯°
from css-doodle.
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 />
from css-doodle.
Sample https://codesandbox.io/s/vjjq6686y0
from css-doodle.
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>
);
}
from css-doodle.
@hiteshsahu Thank you :D
from css-doodle.
@simonmarton Nice!
from css-doodle.
Does this support tsx?
from css-doodle.
@papan01 Nope
from css-doodle.
@Mizumaki Thatβs right! Thank you π
from css-doodle.
import React from "react";
const Doodle = (rule) => () => {
React.useEffect(() => {
const script = document.createElement("script");
script.src = "https://unpkg.com/[email protected]/css-doodle.min.js";
document.body.appendChild(script);
}, []);
return <css-doodle>{rule}</css-doodle>;
};
export { Doodle };
use next.js and css-doodles
from css-doodle.
For Typescript I had to add
declare global {
declare namespace JSX {
interface IntrinsicElements {
'css-doodle': {}
}
}
}
from css-doodle.
anyone tried this with react-native?
from css-doodle.
Related Issues (20)
- Is it possible to scatter the cells inside the doodle to avoid clipping while using shapes like star ? HOT 3
- Group syntax for pick function
- Add range support
- [v0.32.1] Error when using with React/Webpack; Module parse failed: Unexpected token HOT 1
- mode
- Affect adjacent cells with hover HOT 5
- Carousel not responding to hand gestures HOT 1
- not working in nextjs HOT 2
- @grid: 1 with the JS Api fails HOT 4
- Parse keyframes error
- Custom functions HOT 4
- CSS comment inside :after selector doesn't work? HOT 1
- Grid attribute with @size does not work HOT 1
- Example for :doodle doesn't work HOT 1
- Security vulnerability in trim coming from css-doodle HOT 1
- Does it work with Canvas? HOT 4
- Feature Request: Pick a value contains ',' HOT 1
- Improve m function performance
- Idea: @content HOT 2
- Bug Report: `@p` custom properties in `@doodle` HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from css-doodle.