Is there away to pass all variable to all children components

I want to do simple i18n:

// i18n.ts file
export default {
  en: { key: 'value' },
  vi: { key: 'giá trị' },
}

// i18n.ts file
export default {
  en: { key: 'value' },
  vi: { key: 'giá trị' },
}

import t from 'i18n.ts'
import Child from 'Child.ts'

// Component Parent
export default function() {
  const locale = 'vi'
  return (
    <main>
      <h1>{t[locale].key}</h1>
      <Child/>
    </main>
  )
}

import t from 'i18n.ts'
import Child from 'Child.ts'

// Component Parent
export default function() {
  const locale = 'vi'
  return (
    <main>
      <h1>{t[locale].key}</h1>
      <Child/>
    </main>
  )
}

import Grandchild from 'Grandchild.ts'

// Component Child
export default function() {
  return (
    <Grandchild />
    <Grandchild />
    <Grandchild />
  )
}

import Grandchild from 'Grandchild.ts'

// Component Child
export default function() {
  return (
    <Grandchild />
    <Grandchild />
    <Grandchild />
  )
}

import t from 'i18n.ts'

// Component Grandchild
export default function() {
  const locale = 'vi' // it would be good if I can get this from Parent without passing through property
  return <p>{t[locale].key}</p>
}

import t from 'i18n.ts'

// Component Grandchild
export default function() {
  const locale = 'vi' // it would be good if I can get this from Parent without passing through property
  return <p>{t[locale].key}</p>
}

I found this: https://primitives.solidjs.community/package/i18n/ It seems great for big site but mine is super small so it seems to overkill to use that package.

2 Replies

Đăng TúOP•3d ago

nevermind me, I think the useContext can solve my problem: https://docs.solidjs.com/reference/component-apis/use-context#usecontext

quinnvaughn•this hour

Yep, classic use case for context

Gaming

Programming

Is there away to pass all variable to all children components

Did you find this page helpful?