@saunos/restyle-components

@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.