Skip to content

Latest commit

Β 

History

History
186 lines (135 loc) Β· 11.5 KB

README.md

File metadata and controls

186 lines (135 loc) Β· 11.5 KB

πŸ‘¨β€πŸ”§ 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!