Ackee fela

Set of commonly used hooks and types

Installation

$ yarn add @ackee/fela

Hooks

useFelaEnhanced

Enhanced memoized useFela hook from fela. It accepts fela rules and returns:

• styles: an object of class names
• rules: object of passed rules
• theme: fela theme object

Example

1// Component.rules.ts
2import type { TRuleWithTheme } from "@ackee/fela"
3
4export const section: TRuleWithTheme = () => ({
5    padding: '0 2rem',
6})
7
8export const title: TRuleWithTheme = ({ theme }) => ({
9    fontSize: '3rem',
10    color: theme.colors.red,
11    textTransform: 'uppercase'
12})
13
14// Component.jsx
15import { useFelaEnhanced } from "@ackee/fela";
16import * as felaRules from "./Component.rules"
17
18const Component = () => {
19    const { styles } = useFelaEnhanced(felaRules);
20    
21    return (
22        <section className={styles.container}>
23            <h1 className={styles.title}>Hello world</h1>
24        </section>
25    )
26}

Example with props

1// Paragraph.rules.ts
2import type { TRuleWithTheme } from "@ackee/fela"
3import type { ParagraphProps } from "./Paragraph"
4
5export const paragraph: TRuleWithTheme<Pick<ParagraphProps<'weight'>>> = ({ weight }) => ({
6    padding: '0 2rem',
7    fontWeight: weight
8})
9
10// Paragraph.jsx
11import { useFelaEnhanced } from "@ackee/fela";
12import * as felaRules from "./Paragraph.rules"
13
14export interface ParagraphProps {
15    weight: 400 | 500 | 600;
16}
17
18const Paragraph = ({ weight }) => {
19    const { styles } = useFelaEnhanced(felaRules, { weight });
20    
21    return (
22        <p className={styles.paragraph}>Hello world</p>
23    )
24}

Use with your own theme

Define Theme type

If you are using TypeScript, you should extend the default Theme type with your project's theme type inside a .d.ts file.

1// theme.ts
2export const theme = {
3    colors: {
4        red: "#F00",
5        green: "#0F0",
6        blue: "#00F",
7    },
8} as const;
9
10export type Theme = typeof theme;
11
12// index.d.ts 
13import { Theme as ProjectTheme } from "./theme.ts"
14
15declare module "@ackee/fela" {
16  interface Theme extends ProjectTheme {}
17}

Extending an existing component

To extend rules of an existing component you can define a prop extend inside the component and pass it to the useFelaEnhanced hook.

1// Paragraph.tsx
2import { useFelaEnhanced } from "@ackee/fela";
3import type { RulesExtend } from "@ackee/fela";
4
5const felaRules = {
6    paragraph: {
7        padding: '0 2rem',
8        fontSize: '1rem'
9    }
10}
11
12export interface ParagraphProps {
13    weight: 400 | 500 | 600;
14    extend?: RulesExtend<typeof felaRules>
15}
16
17const Paragraph = ({ extend }) => {
18    const { styles } = useFelaEnhanced(felaRules, { extend });
19
20    return (
21        <p className={styles.paragraph}>Hello world</p>
22    )
23}
24
25// Description.tsx
26import { useFelaEnhanced } from "@ackee/fela";
27import type { RulesExtend } from "@ackee/fela";
28
29import { Paragraph } from "../Paragraph"
30
31export interface ParagraphProps {
32    weight: 400 | 500 | 600;
33}
34
35const felaRules = {
36    description: {
37        fontSize: '1.25rem',
38        color: '#00F'
39    }
40}
41
42const Description = () => {
43    const { rules } = useFelaEnhanced(felaRules);
44
45    return (
46        <Paragraph extend={{ paragraph: rules.description }}>Hello world</Paragraph>
47    )
48}

TypesScript

TRuleWithTheme

A generic type that takes rule props as input. It is based on the TRule generic type from fela but extended with the theme prop in the function props.

1/// Component.rules.ts
2import type { TRuleWithTheme } from "@ackee/fela";
3
4export const paragraph: TRuleWithTheme<{ weight: number }> = ({ theme, weight }) => ({
5    color: theme.colors.red,
6    fontWeight: weight,
7})
8
9export const container: TRuleWithTheme = ({ theme }) => ({
10    backgroundColor: theme.colors.red,
11    display: 'flex'
12})

RulesExtend

A generic type that takes type of component's fela rules as input.

1const felaRules = {
2    paragraph: {
3        padding: '0 2rem',
4        fontSize: '1rem'
5    }
6}
7
8export interface ParagraphProps {
9    weight: 400 | 500 | 600;
10    extend?: RulesExtend<typeof felaRules>
11}
12
13const Paragraph = ({ extend }) => {
14    const { styles } = useFelaEnhanced(felaRules, { extend });
15
16    return (
17        <p className={styles.paragraph}>Hello world</p>
18    )
19}