👨‍🔧 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!