feat/true-focus: add support for custom words array prop #677
Conversation
…cing control Added optional words prop to True Focus component Falls back to splitting sentence when words not provided Enables developers to control spacing precisely between words Maintains backward compatibility
|
It makes zero sense to have two ways of providing the text. If you want this merged, clean up the "sentence" prop and its usage. Also, be 100% sure nothing is broken by your changes by thoroughly testing locally. |
There was a problem hiding this comment.
Pull Request Overview
This PR adds an optional words prop to the TrueFocus component, allowing users to pass a pre-split array of words/tokens instead of relying solely on the default space-based sentence splitting. This provides better control over spacing and tokenization.
Key Changes
- Added optional
words?: string[]prop to component interfaces/parameters - Renamed internal
wordsvariable towordListto avoid naming collision - Updated
wordListinitialization to prioritize thewordsprop over splittingsentence
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/ts-tailwind/TextAnimations/TrueFocus/TrueFocus.tsx | Added words prop and refactored to use wordList variable |
| src/ts-default/TextAnimations/TrueFocus/TrueFocus.tsx | Added words prop and refactored to use wordList variable |
| src/tailwind/TextAnimations/TrueFocus/TrueFocus.jsx | Added words prop and refactored to use wordList variable |
| src/content/TextAnimations/TrueFocus/TrueFocus.jsx | Added words prop and refactored to use wordList variable |
| src/demo/TextAnimations/TrueFocusDemo.jsx | Documented the new words prop in the demo |
| public/r/TrueFocus-TS-TW.json | Updated registry file with new component code |
| public/r/TrueFocus-TS-CSS.json | Updated registry file with new component code |
| public/r/TrueFocus-JS-TW.json | Updated registry file with new component code |
| public/r/TrueFocus-JS-CSS.json | Updated registry file with new component code |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| pauseBetweenAnimations = 1 | ||
| }) => { | ||
| const words = sentence.split(' '); | ||
| const wordList = Array.isArray(words) && words.length > 0 ? words : sentence.split(' '); |
There was a problem hiding this comment.
The words prop should be included in the dependency arrays of the useEffect hooks to ensure the component properly re-renders when words changes. Currently, only wordList.length is tracked, which won't detect changes if the words prop reference changes but maintains the same length.
| pauseBetweenAnimations = 1 | ||
| }) => { | ||
| const words = sentence.split(' '); | ||
| const wordList = Array.isArray(words) && words.length > 0 ? words : sentence.split(' '); |
There was a problem hiding this comment.
The words prop should be included in the dependency arrays of the useEffect hooks to ensure the component properly re-renders when words changes. Currently, only wordList.length is tracked, which won't detect changes if the words prop reference changes but maintains the same length.
| pauseBetweenAnimations = 1 | ||
| }) => { | ||
| const words = sentence.split(' '); | ||
| const wordList = Array.isArray(words) && words.length > 0 ? words : sentence.split(' '); |
There was a problem hiding this comment.
The words prop should be included in the dependency arrays of the useEffect hooks to ensure the component properly re-renders when words changes. Currently, only wordList.length is tracked, which won't detect changes if the words prop reference changes but maintains the same length.
| pauseBetweenAnimations = 1 | ||
| }) => { | ||
| const words = sentence.split(' '); | ||
| const wordList = Array.isArray(words) && words.length > 0 ? words : sentence.split(' '); |
There was a problem hiding this comment.
The words prop should be included in the dependency arrays of the useEffect hooks to ensure the component properly re-renders when words changes. Currently, only wordList.length is tracked, which won't detect changes if the words prop reference changes but maintains the same length.
2 participants
Summary
Fixes #676
This PR introduces an optional
wordsprop to the True Focus component, allowing developers to pass a custom array of words (or space tokens) for precise spacing control.Changes
words?: string[]wordsis provided, it is used directly instead of splittingsentencevia.split(" ")propDataand registry entry to document the new propsentenceusage works as beforeMotivation
Currently, multiple spaces between words are collapsed because of
.split(" ").This new prop allows full flexibility: