Skip to content

πŸ‘¨β€πŸ”§ Enhance your React.js app with i18n, string formatting, ab tests and other handy packages!

License

Notifications You must be signed in to change notification settings

agoda-com/react-handyman

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ‘¨β€πŸ”§ React handyman

All Contributors semantic-release Commitizen friendly dependabot badge

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.


npm npm bundle size Build Status codecov

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!


npm npm bundle size Build Status codecov

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.


npm npm bundle size Build Status codecov

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.


npm npm bundle size Build Status codecov

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.

npm npm bundle size Build Status codecov

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!