Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/agoda-com/react-handyman
👨🔧 Enhance your React.js app with i18n, string formatting, ab tests and other handy packages!
https://github.com/agoda-com/react-handyman
ab-testing feature-toggle i18n internationalization jsx react reactjs string-formatter string-formatting
Last synced: 26 days ago
JSON representation
👨🔧 Enhance your React.js app with i18n, string formatting, ab tests and other handy packages!
- Host: GitHub
- URL: https://github.com/agoda-com/react-handyman
- Owner: agoda-com
- License: mit
- Created: 2019-06-09T12:58:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T22:29:39.000Z (over 1 year ago)
- Last Synced: 2024-09-27T19:41:04.014Z (about 1 month ago)
- Topics: ab-testing, feature-toggle, i18n, internationalization, jsx, react, reactjs, string-formatter, string-formatting
- Language: TypeScript
- Homepage:
- Size: 7.41 MB
- Stars: 37
- Watchers: 7
- Forks: 8
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# 👨🔧 React handyman
[](#contributors)
[](https://github.com/semantic-release/semantic-release)
[](http://commitizen.github.io/cz-cli/)
[](https://dependabot.com/)
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](/packages/ab-test-jsx)
[](https://www.npmjs.com/package/ab-test-jsx)
[](https://bundlephobia.com/result?p=ab-test-jsx)
[](https://codecov.io/gh/agoda-com/react-handyman)
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:
```jsx
import { ABTest } from 'ab-test-jsx'
const Header: React.FC = () => (
<>
Old header implementation
New header!
>
)
```
Use custom hook to access allocation results and implement custom logic in your components:
```jsx
const SearchBox: React.FC = () => {
const { isB } = useABTests()
const apiEndpoint = isB('use-new-api') ? newApiUrl : apiUrl
return
}
```
Please see more examples, detailed documentation and other available components in the [package README file](/packages/ab-test-jsx)!
---
# [feature-toggle-jsx](/packages/feature-toggle-jsx)
[](https://www.npmjs.com/package/feature-toggle-jsx)
[](https://bundlephobia.com/result?p=feature-toggle-jsx)
[](https://codecov.io/gh/agoda-com/react-handyman)
Toggle visibility of your react components based on features configuration of your app.
```jsx
// 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](/packages/feature-toggle-jsx).
---
# [i18n-jsx](/packages/i18n-jsx)
[](https://www.npmjs.com/package/i18n-jsx)
[](https://bundlephobia.com/result?p=i18n-jsx)
[](https://codecov.io/gh/agoda-com/react-handyman)
React (JS) text internationalization and externalizing. Supports string formatting and fallback to default values.
```jsx
import { I18n } from 'i18n-jsx'
const I18nExamples: React.FC = () => {
return (
Default fallback text that should not render
)
}
```
With `example.key.1` translation key set up as
```
'This is text under example.key.1 value'
```
I18nExamples component will render:
```html
This is text under example.key.1 value
```
Check out details and more examples in [package README file](/packages/i18n-jsx).
---
# [format-to-jsx](/packages/format-to-jsx)
[](https://www.npmjs.com/package/format-to-jsx)
[](https://bundlephobia.com/result?p=format-to-jsx)
[](https://codecov.io/gh/agoda-com/react-handyman)
Easy string formatting with support of injecting JSX elements and object based params
```ts
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, 2)
// <>Example 2 with different placeholders order 1<>
```
Check out details and more examples in [package README file](/packages/format-to-jsx).
# [error-boundary-jsx](/packages/error-boundary-jsx)
[](https://www.npmjs.com/package/error-boundary-jsx)
[](https://bundlephobia.com/result?p=error-boundary-jsx)
[](https://codecov.io/gh/agoda-com/react-handyman)
Handle errors on wrapped component and provide a fall back.
```ts
import ErrorBoundary from 'error-boundary-jsx'
...component tree to handle errors
```
Check out details and more examples in [package README file](/packages/error-boundary-jsx).
---
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/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](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!