Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simple, robust and performant API #597

Closed
wants to merge 28 commits into from
Closed
Changes from 1 commit
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

updated API docs

  • Loading branch information...
rofrischmann
rofrischmann committed Sep 27, 2018
commit e3a132faf600b672602755ab528d8700d1fa7c28
@@ -6,16 +6,16 @@ FelaComponent is an alternative component to the [createComponent](createCompone

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| customClass | string | class(es) to prepend before the generated classes |
| style | [*StyleObject*](../../basics/Rules.md#styleobject)<br>*Function*| | Either a valid style object or a function of `theme` |
| rule | *Function*| | A function of `theme` and props|
| render | *string?*<br>*Function* | `div` | Either a render function or a string primitive to render into.<br>If passing a render function is receives the specified render interface. |
| style | [*Rule*](../../basics/Rules.md)<br>[*StyleObject*](../../basics/Rules.md#styleobject)<br>*Array\<[*Rule*](../../basics/Rules.md)\|[*StyleObject*](../../basics/Rules.md#styleobject)\>*| | Either a valid style object, and [rule](../../basics/Rules.md) or an array of both |
| children | *any* | | Either a render function or a primitive child.<br>If passing a render function is receives the specified render interface. |
| as | *string* | `div` | If children is passed a primitive child, the component will render an `as`-type DOM element with the className attached and the primitive child as content.

#### Render Interface
| Property | Type | Default | Description |
| --- | --- | --- | --- |
| className | *string* | | The class names for the rendered *style* object |
| theme | *Object* | `{}` | The theme object which is passed down via context |
| as | *string* | `div` | The `as` property that is passed to the component |

## Imports
```javascript
@@ -30,11 +30,11 @@ import { FelaComponent } from 'inferno-fela'
style={{
backgroundColor: 'blue',
color: 'red'
}}
render={({ className, theme }) => (
}}>
{({ className, theme }) => (
<div className={className}>I am red on blue.</div>
)}
/>
</FelaComponent>
```

#### Generic Components
@@ -46,33 +46,34 @@ const Button = ({ color, big = false, text }) => (
style={{
backgroundColor: color,
fontSize: big ? 18 : 15
}}
render={({ className }) => (
}}>
{({ className }) => (
<button className={className}>{text}</button>
)}
/>
</FelaComponent>
)
```

#### Using Theme
To access theme properties, we can simply pass a function of theme.

```javascript
<FelaComponent
style={theme => ({
backgroundColor: theme.bgPrimary,
color: 'red'
})}
render={({ className, theme }) => (
const style = ({ theme }) => ({
backgroundColor: theme.bgPrimary,
color: 'red'
})
<FelaComponent style={rule}>
{({ className, theme }) => (
<div className={className}>I am red on {theme.bgPrimary}.</div>
)}
/>
```

#### Style Rule as a Function of Props and Theme
Sometimes it is desirable to style a component as a function of both theme and
props. The `rule` prop takes a callback, and passes it an object with `theme`
and all props passed to FelaComponent except "style", "render" and "rule".
props. The `style` prop takes a callback, and passes it an object with `theme`
and all props passed to FelaComponent except *style* and *children*.

This provides an API that is both compatible with createComponent, and allows
using an externally defined function in such use cases. Hopefully, this can
@@ -81,15 +82,13 @@ every render.


```javascript
const ruleFunction = ({ theme, bgc }) => ({
const rule = ({ theme, bgc }) => ({
backgroundColor: bgc || 'red',
color: theme.bgPrimary,
})
<FelaComponent
bgc='blue',
rule={ruleFunction}
render={({ className, theme }) => (
<FelaComponent bgc='blue' style={rule}>
{({ className, theme }) => (
<div className={className}>I am {theme.bgPrimary} on {bgc || 'red'}.</div>
)}
/>
@@ -105,25 +104,31 @@ Children will automatically be passed down. If not specified at all, it will ren
backgroundColor: 'blue',
color: 'red'
}}
render='span'
as='span'
>
I am red on blue
</FelaComponent>
```

#### Add Custom Classes
The common use case of needing to add a custom class to the generated ones, e.g.
for integration with 3rd party libraries, can be handled using the `customClass`
prop.
#### Composition
In order to compose multiple FelaComponents we can't just concatenate classNames as they might overwrite each other due to the atomic CSS design and specificity.<br>
We have to use a built-in API to correctly combine those rules and styles: [combineRules](../fela/combineRules.md).

With FelaComponent we can leverage that API automatically by passing an array to the *style* prop.

```javascript
<FelaComponent
customClass="my-custom-class"
style={{ color: 'red' }}
>
I am red and have a custom class
</FelaComponent>
// <div class="my-custom-class a">
// I am red and have a custom class
// </div>
```
const baseStyle = {
backgroundColor: 'red',
fontSize: 15
}
const Button = ({ style, ...props }) => (
<FelaComponent style={[baseStyle, style]} {...props} as="button" />
)
const ExtendedButton = ({ style, children }) => (
<Button style={{ color: 'blue' }}>Click</Button>
)
```

The array accepts both style objects, rule functions and even nested arrays again.
@@ -6,7 +6,7 @@ FelaTheme is an alternative component to the [withTheme](withTheme.md)-HoC lever

| Property | Type | Description |
| --- | --- | --- | --- |
| render | *Function* | A render function that receives the theme object as its first parameter. |
| children | *Function* | A render function that receives the theme object as its first parameter. |


## Imports
@@ -18,9 +18,9 @@ import { FelaTheme } from 'inferno-fela'

## Example
```javascript
<FelaTheme
render={theme => (
<FelaTheme>
{theme => (
<div>Primary color is ${theme.primary}.</div>
)}
/>
</FelaTheme>
```
@@ -1,10 +1,9 @@
# fe

Fe is a convenient replacement for `createElement`.<br>
Fe is a convenient replacement for React's [createElement](https://reactjs.org/docs/react-api.html#createelement).<br>
It is heavily inspired by [glam](https://github.com/threepointone/glam) and basically works the same.

Fe directly renders inline style objects, which are passed to the `css` prop of JSX components.<br>
It uses [FelaComponent](FelaComponent.md) internally.
Fe directly renders style objects, which are passed to the `css` prop of JSX components by using [FelaComponent](FelaComponent.md) internally.

## Usage
Fe is especially made to replace `createElement` when using JSX.<br>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.