Zenn
Open7

FramerのTips&Memo

Framer
原口原口

Framerのちょっとした気付きなどを書き留めようと思います。

原口原口

FramerのcodeOverridesでstyledComponentが使える。
CMSのフォーマットテキストなどのスタイル追加に使えそう。

import styled from "styled-components"
import type { ComponentType } from "react"

export function withBorderGradient(Component): ComponentType {
    const StyledComponent = styled(Component)`
        background: red;
    `

    return (props) => {
        return <StyledComponent {...props} />
    }
}

元記事：https://designcode.io/framer-web-design-code-overrides

原口原口

codeOverrides自体の仕様かStyledComponentの仕様か不明だが、動的にスタイルが適用されるようで、ページ遷移後であれば意図通りスタイルが反映されたが、リロードでは反映されなかった。
深くは掘ってないので単純に書き方の問題かもしれない

原口原口

ストアを使ってリッチテキストから目次を作ろうと思ったが、ストアの更新タイミングがコントロールしきれず断念。

import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
// hタグを収取してこのストア（グローバルステート）に保持する
export const useStore = createStore({
    headings: [],
})

export function withReadOverride(Component): ComponentType {
    // refを使ってhタグを収集
    // useStoreを使って値を保存
}
export function withTableOfOverride(Component): ComponentType {
    // useStoreの値から目次を描画
    const [store, setStore] = useStore()
    useEffect(() => {
        // ここで最新の値が取れない。。。
    }, [store]}
}
原口原口

useEffectでのタイミングではストアが上手くつながっていない？多分レンダリングのタイミングの差が原因っぽい。setTimeoutでsetStoreしたら上手く配信された。ただ、ハックぽいやりかたなのでtimeoutの時間とかは余裕を作っておいたほうが良さそう。

import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
// hタグを収取してこのストア（グローバルステート）に保持する
export const useStore = createStore({
    headings: [],
})

export function withReadOverride(Component): ComponentType {
    return (props) => {
        // refを使ってhタグを収集
        useEffect(() => {
            // 目次用のリスト取得
            // ストアの更新（遅延をつける）
            window.setTimeout(() => setStore(···), 500)
        }, [])
        return <Component {...props} />
    }
}
export function withTableOfOverride(Component): ComponentType {
    return (props) => {
        // useStoreの値から目次を描画
        const [store, setStore] = useStore()
        // ストアの値を使ってレンダリング
        return <Component {...props} />
    }
}