https://github.com/flodlc/sx-machine
Sx-machine provides a Box component for React and its themed SX property.
https://github.com/flodlc/sx-machine
css design react sx theme typescript
Last synced: 11 months ago
JSON representation
Sx-machine provides a Box component for React and its themed SX property.
- Host: GitHub
- URL: https://github.com/flodlc/sx-machine
- Owner: flodlc
- License: mit
- Created: 2022-09-10T11:01:56.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-20T12:46:25.000Z (over 3 years ago)
- Last Synced: 2025-04-04T13:06:20.673Z (over 1 year ago)
- Topics: css, design, react, sx, theme, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/sx-machine
- Size: 5.13 MB
- Stars: 11
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Sx-machine
First class Sx property for React.
## Sx-machine is a lightweight library that provides a Box component for React and its themed SX property.
### Main features
- Box component for React
- Sx property with first class typescript support
- Highly customizable theme provider
- Reusable components factory
- Style caching for high performances
#### Here is an exemple of usage
https://user-images.githubusercontent.com/3781663/199988034-7f4b5e8e-2217-4634-9ab4-9de8740d93c2.mov
## Installation
```
npm install sx-machine
---
yarn add sx-machine
```
## Usage
### Basic
```javascript
const theme = {
...defaultTheme,
colors: {
$primary: '#234234',
},
};
const Exemple = () => {
return (
Content
);
};
```
## Theming
Sx-machine provides a powerful theming feature.
The default theme includes spaces and breakpoints.
> ### $ prefix
>
> It's recommanded to use $ prefixed theme keys to help differenciate theme values from native CSS values
```javascript
import { defaultTheme } from 'sx-machine';
const theme = {
...defaultTheme,
colors: {
$primary: '#234234',
$secondary: '#456456',
},
shadows: {
$1: '0 2px 6px 0 rgba(0, 0, 0, 0.15)',
$2: '0 2px 8px 0px rgba(0, 0, 0, 0.13)',
$3: '0 2px 12px 1px rgba(0, 0, 0, 0.10)',
},
};
const App = () => {
return ...;
};
```
## The `as` attribute
The Box Component is the primitive component that allows you to access the sx property. By default it renders a div html element.
It accepts a `as` attribute to choose the needed tag.
```javascript
My link
```
> Of course, the href attribute type is well inferred from the "`a`" tag.
> And it works for all tags and Components !
## Reusable components
Components often need to be reusable and easily customisable with the sx property overriding.
Let's create a reusable Button !
```javascript
// Button.tsx
import { createSxComponent } from 'sx-machine';
const Button: Button = createSxComponent<'div',
{
children?: React.ReactNode,
}>(({ children, sx, ...props }) => {
return (
{children}
);
});
```
```javascript
// Page.tsx
import Button from './Button.tsx';
const Page = () => {
return (
{console.log('hey!')}>Button
// Reusable components allows additional style with the sx prop
Custom Button
);
};
```