@youversion/platform-react-ui 1.13.0 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -35,7 +35,7 @@ import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui
35
35
  function App() {
36
36
  return (
37
37
  <YouVersionProvider appKey={"YOUR_APP_KEY"}>
38
- <BibleTextView reference="JHN.1.1-4" versionId={111} />
38
+ <BibleTextView reference="JHN.1.1-4" versionId={3034} />
39
39
  </YouVersionProvider>
40
40
  );
41
41
  }
@@ -43,29 +43,72 @@ function App() {
43
43
 
44
44
  ## Theming
45
45
 
46
- Toggle theme via the `YVPProvider`:
46
+ Set the theme via the `YouVersionProvider`'s `theme` prop. Defaults to `'light'`.
47
+
48
+ ```tsx
49
+ import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui';
50
+
51
+ function App() {
52
+ return (
53
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="dark">
54
+ <BibleTextView reference="JHN.1.1-4" versionId={3034} />
55
+ </YouVersionProvider>
56
+ );
57
+ }
58
+ ```
59
+
60
+ ### Theme options
61
+
62
+ | Value | Behavior |
63
+ |-------|----------|
64
+ | `'light'` | Light mode (default) |
65
+ | `'dark'` | Dark mode |
66
+ | `'system'` | Follows the user's OS preference via `prefers-color-scheme` |
67
+
68
+ ### Following OS theme
69
+
70
+ Pass `theme="system"` to automatically match the user's OS setting:
71
+
72
+ ```tsx
73
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="system">
74
+ {/* Components switch between light/dark based on OS preference */}
75
+ </YouVersionProvider>
76
+ ```
77
+
78
+ ### Toggling theme manually
47
79
 
48
80
  ```tsx
49
81
  import { useState } from 'react';
50
- import { YouVersionProvider, YVPProvider, BibleTextView } from '@youversion/platform-react-ui';
82
+ import { YouVersionProvider, BibleTextView } from '@youversion/platform-react-ui';
51
83
 
52
- export default function App() {
84
+ function App() {
53
85
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
54
86
 
55
87
  return (
56
- <YouVersionProvider appKey="YOUR_APP_KEY">
57
- <YVPProvider config={{ appKey: "YOUR_APP_KEY" }} theme={theme}>
58
- <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
59
- Toggle theme
60
- </button>
61
- <BibleTextView reference="JHN.1.1-4" versionId={111} />
62
- </YVPProvider>
88
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme={theme}>
89
+ <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
90
+ Toggle theme
91
+ </button>
92
+ <BibleTextView reference="JHN.1.1-4" versionId={3034} />
63
93
  </YouVersionProvider>
64
94
  );
65
95
  }
66
96
  ```
67
97
 
68
- Customize via CSS variables:
98
+ ### Per-component overrides
99
+
100
+ Individual components accept a `background` prop to override the provider theme locally:
101
+
102
+ ```tsx
103
+ <YouVersionProvider appKey="YOUR_APP_KEY" theme="light">
104
+ {/* This component uses dark styling despite the provider being light */}
105
+ <BibleReader.Root background="dark" versionId={3034}>
106
+ <BibleReader.Content />
107
+ </BibleReader.Root>
108
+ </YouVersionProvider>
109
+ ```
110
+
111
+ ### Custom CSS variables
69
112
 
70
113
  ```css
71
114
  [data-yv-sdk] {
@@ -1 +1 @@
1
- {"version":3,"file":"bible-reader.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.tsx"],"names":[],"mappings":"AAEA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA6Cf,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,OAAO,EAAE,iBAAiB,EAC1B,cAAoB,EACpB,eAAe,EACf,SAAS,EAAE,mBAAmB,EAC9B,gBAAsB,EACtB,eAAe,EACf,UAAoB,EACpB,QAA4B,EAC5B,UAAU,EACV,gBAAuB,EACvB,UAAU,EACV,QAAQ,GACT,EAAE,SAAS,2CAgFX;AAED,iBAAS,OAAO,4CAoEf;AA2CD,iBAAS,OAAO,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CAmKjE;AAED,eAAO,MAAM,WAAW;;;;CAAgD,CAAC;AACzE,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC"}
1
+ {"version":3,"file":"bible-reader.d.ts","sourceRoot":"","sources":["../../src/components/bible-reader.tsx"],"names":[],"mappings":"AAUA,OAAO,EAEL,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAsCf,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAMF,iBAAS,IAAI,CAAC,EACZ,IAAI,EAAE,cAAc,EACpB,WAAmB,EACnB,YAAY,EACZ,OAAO,EAAE,iBAAiB,EAC1B,cAAoB,EACpB,eAAe,EACf,SAAS,EAAE,mBAAmB,EAC9B,gBAAqD,EACrD,eAAe,EACf,UAAoB,EACpB,QAA4B,EAC5B,UAAU,EACV,gBAAuB,EACvB,UAAU,EACV,QAAQ,GACT,EAAE,SAAS,2CAgFX;AAED,iBAAS,OAAO,4CAoEf;AA2CD,iBAAS,OAAO,CAAC,EAAE,MAAc,EAAE,EAAE;IAAE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;CAAE,2CAmKjE;AAED,eAAO,MAAM,WAAW;;;;CAAgD,CAAC;AACzE,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAkExC"}
1
+ {"version":3,"file":"bible-widget-view.d.ts","sourceRoot":"","sources":["../../src/components/bible-widget-view.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,oBAAoB,GAAG;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;AACF,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,SAAS,EACT,UAAU,EACV,iBAAyB,GAC1B,EAAE,oBAAoB,GAAG,KAAK,CAAC,SAAS,CAmExC"}
@@ -5,7 +5,7 @@ export type VerseOfTheDayProps = {
5
5
  */
6
6
  background?: 'light' | 'dark';
7
7
  /**
8
- * The Bible Translation version id to use, defaults to 111 (NIV).
8
+ * The Bible version id to use, defaults to DEFAULT_LICENSE_FREE_BIBLE_VERSION.
9
9
  */
10
10
  versionId?: number;
11
11
  /**
@@ -36,7 +36,7 @@ export type VerseOfTheDayProps = {
36
36
  * @example
37
37
  * ```tsx
38
38
  * <VerseOfTheDay
39
- * versionId={111}
39
+ * versionId={3034}
40
40
  * showSunIcon={true}
41
41
  * showShareButton={false}
42
42
  * showBibleAppAttribution={true}
@@ -44,6 +44,5 @@ export type VerseOfTheDayProps = {
44
44
  * />
45
45
  * ```
46
46
  */
47
- export declare function VerseOfTheDay({ background, dayOfYear, versionId, // NIV by default
48
- showSunIcon, showShareButton, showBibleAppAttribution, size, }: VerseOfTheDayProps): React.ReactElement;
47
+ export declare function VerseOfTheDay({ background, dayOfYear, versionId, showSunIcon, showShareButton, showBibleAppAttribution, size, }: VerseOfTheDayProps): React.ReactElement;
49
48
  //# sourceMappingURL=verse-of-the-day.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"verse-of-the-day.d.ts","sourceRoot":"","sources":["../../src/components/verse-of-the-day.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAe1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,CAAC;AAoBF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,SAAS,EACT,SAAe,EAAE,iBAAiB;AAClC,WAAkB,EAClB,eAAsB,EACtB,uBAA8B,EAC9B,IAAgB,GACjB,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CA4GzC"}
1
+ {"version":3,"file":"verse-of-the-day.d.ts","sourceRoot":"","sources":["../../src/components/verse-of-the-day.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;CACzB,CAAC;AAoBF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,UAAU,EACV,SAAS,EACT,SAA8C,EAC9C,WAAkB,EAClB,eAAsB,EACtB,uBAA8B,EAC9B,IAAgB,GACjB,EAAE,kBAAkB,GAAG,KAAK,CAAC,YAAY,CA4GzC"}