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.

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!

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.

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.

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.

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.

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!