FramerのTips&Memo

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

FramerのcodeOverridesの参考になるページ
framer.motionを使ったジェネレーター。いろいろなパターンが有るのでカスタムの元として有用そう。
https://frameroverrides.com/generator

原口

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]}
}