https://github.com/solarliner/preact-dandy

Small and fancy (like my pet dog) CSS-in-JS solution for preact.
https://github.com/solarliner/preact-dandy

component css-in-js javascript js preact

Last synced: 7 days ago
JSON representation

Small and fancy (like my pet dog) CSS-in-JS solution for preact.

• Host: GitHub
• URL: https://github.com/solarliner/preact-dandy
• Owner: SolarLiner
• License: mit
• Created: 2019-04-16T21:20:33.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-04-18T21:50:52.000Z (over 5 years ago)
• Last Synced: 2024-10-10T20:15:41.097Z (28 days ago)
• Topics: component, css-in-js, javascript, js, preact
• Language: TypeScript
• Size: 129 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# preact-dandy

Small and fancy (like my pet dog) CSS-in-JS solution for preact.

![License](https://img.shields.io/npm/l/preact-dandy.svg)

![npm version](https://img.shields.io/npm/v/preact-dandy.svg)

![preact peer dependency version](https://img.shields.io/npm/dependency-version/preact-dandy/peer/preact.svg)

![npm type definitions](https://img.shields.io/npm/types/preact-dandy.svg)

## Install

```bash

npm i preact-dandy

```

## Usage

```typescript

import styled from "preact-dandy";

interface ButtonProps {

  class?: string;

  color: string;

  flat?: boolean;

  dense?: boolean;

}

const Button = styled(

  "button",

  {

    margin: "0.5em",

    padding: "1em",

    border: "unset",

    cursor: "pointer",

    borderRadius: "5px"

  },

  props => ({

    backgroundColor: props.flat ? "transparent" : props.color,

    color: props.flat ? props.color : textColor(props.color),

    padding: props.dense ? "0.5em 1em" : undefined, // Undefined object values are filtered out, use this to not override a property

    boxShadow: props.flat ? "initial" : "0 1.5px 3px rgba(0,0,0,0.3)"

  })

);

```

The main export is a `styled` function which takes 3 arguments:

1. **el** is the element used to render the component. In TypeScript this is restricted to the JSX "Intrinsic elements" to prevent use of HOC as it could lead to undesired behavior. This is however just a soft requirement. `el` is simply passed to `createElement` and does not care about its type.

2. **css** is the CSS object containing the syles to be applied to the component. This object is static, to dynamically style the component, see the `cssGenerator` argument.

3. **cssGenerator** (optional) is a function that takes the props as input and outputs a CSS object. This allows dynamic styling based on component values.

For TypeScript users, the `styled` function contains one optional type argument, which is used to type the props of the resulting component. The props are passed to the `cssGenerator` function but also to the resulting component, allowing you to have typed components.