react-handyman
react-handyman copied to clipboard
👨🔧 Enhance your React.js app with i18n, string formatting, ab tests and other handy packages!
👨🔧 React handyman
This is a monorepo containing all packages that can help you extend functionalities of your react.js based application. For detailed documentation about each package, checkout each README file for each package.
ab-test-jsx
React (JS) based client for consuming AB test logic in your app.
Do conditional rendering based on experiment allocation in your JSX with help of ABTest
component:
import { ABTest } from 'ab-test-jsx'
const Header: React.FC = () => (
<>
<ABTest name="header-experiment" variant="A">
<h1>Old header implementation</span>
</ABTest>
<ABTest name="header-experiment" variant="B">
<h2>New header!</h2>
</ABTest>
</>
)
Use custom hook to access allocation results and implement custom logic in your components:
const SearchBox: React.FC = () => {
const { isB } = useABTests()
const apiEndpoint = isB('use-new-api') ? newApiUrl : apiUrl
return <Autocomplete api={apiEndpoint} />
}
Please see more examples, detailed documentation and other available components in the package README file!
feature-toggle-jsx
Toggle visibility of your react components based on features configuration of your app.
// HOC
export default withFeature(ChatComponent, 'chat')
export default withoutFeature(PlaceholderComponent, 'chat')
// with custom selector
export default withFeature(ChatComponent, 'chat', _ => _.someConfigValue == true)
// Hook
const [isEnabled, config] = useFeature('chat')
const [isEnabled] = useFeature('chat' _ => _.someConfigValue == 4)
Check out details and more examples in package README file.
i18n-jsx
React (JS) text internationalization and externalizing. Supports string formatting and fallback to default values.
import { I18n } from 'i18n-jsx'
const I18nExamples: React.FC = () => {
return (
<p>
<I18n k="example.key.1">Default fallback text that should not render</I18n>
</p>
)
}
With example.key.1
translation key set up as
'This is text under example.key.1 value'
I18nExamples component will render:
<p>This is text under example.key.1 value</p>
Check out details and more examples in package README file.
format-to-jsx
Easy string formatting with support of injecting JSX elements and object based params
format('Example {1} with different placeholders order {0}', 1, 2)
// Example 2 with different placeholders order 1
format('Example {two} with different placeholders order {one}', { one: 1, two: 2 })
// Example 2 with different placeholders order 1
format('Example {1} with different placeholders order {0}', 1, <strong>2</strong>)
// <>Example <strong>2</strong> with different placeholders order 1<>
Check out details and more examples in package README file.
error-boundary-jsx
Handle errors on wrapped component and provide a fall back.
import ErrorBoundary from 'error-boundary-jsx'
<ErrorBoundary onError={componentErrorHandler} name="component name" FallbackComponent={CustomFallbackComponent}>
...component tree to handle errors
</ErrorBoundary>
Check out details and more examples in package README file.
Contributors
Thanks goes to these wonderful people (emoji key):
Maciej Małkowski 💻 📖 ⚠️ 👀 |
Nut Sornchumni 💻 📖 ⚠️ 👀 |
Thatchapon Unprasert 📖 💻 ⚠️ 👀 |
nickyshannon 💻 ⚠️ 👀 |
Nielsie 💻 ⚠️ |
Md Mahmudul Hasan 💻 ⚠️ |
Hasan AJ 💻 |
Soren Ullidtz 💻 ⚠️ 📖 |
Pramoch Viriyathomrongul 💻 |
Thammarith 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!