@saunos/restyle-components NPM

@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>
  );
}