@saunos/restyle-components
v0.1.0
Published
JSX source transformation for Restyle and React components
Downloads
17
Readme
@saunos/restyle-components
@saunos/restyle-components
is a library that provides jsx transform to expose css
prop from Restyle for React components.
Features
- 🎨 Use ReStyle's css prop with React's function components
Installation
npm install @saunos/restyle-components restyle
Setup
- Update your
tsconfig.json
to use the custom JSX transform:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@saunos/restyle-components"
}
}
- If you prefer per-file configuration, add this comment at the top of your
.tsx
files:
/** @jsxImportSource @saunos/restyle-components */
Usage
Here's a basic example of how to use @saunos/restyle-components
:
import React from 'react';
import { Button, Text } from '@mantine/core';
import { theme } from './theme';
function App() {
return (
<div>
<Button
css={{
backgroundColor: theme.colors.primary,
marginBottom: theme.spacing.m,
}}
>
Styled Button
</Button>
<Text
css={{
fontSize: 18,
}}
>
Styled Text
</Text>
</div>
);
}
API Reference
css
prop
Please refer to Restyle's docs for more details.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
License
This project is licensed under the MIT License.