react-agnostic
Platform agnostic react components
The problem
React is known to be a multi-platform UI library, but it is not that simple to get done. There are many renderers (as: react-dom, react-native, react-primitives, reactxp, react-blessed, react-tv, react-pdf, redocx, react-360, etc) which allow components to run in different platforms. When you write a component that dependends directly on a component specific to some platform, this means it wont run on any other platform.
This solution
react-agnostic
makes it so you can write your components without any direct dependencies from platform specific components. It applies inversion of control using react context pass around components.
Table of Contents
Installation
This module is distributed via npm which is bundled with node and
should be installed as one of your project's dependencies
:
npm install --save react-agnostic
Usage
This library exports a component and a HOC (Higher Order Component)
ComponentsProvider
This component allows the components augmented by withComponents
to access platform specific components.
At the top level of your app, setup specific platform components and render the ComponentsProvider
component passing a components
prop.
If you're using create-react-app, your App.js file would look something like this:
import React from 'react'import ComponentsProvider from 'react-agnostic'import UpdateCartItem from './components/UpdateCartItem' const Text = <span = />const View = <div = />const Button = <button = /> const components = View Text Button Component state = item: name: 'ball' amount: 3 { return <ComponentsProvider => <UpdateCartItem = = /> </ComponentsProvider> }
withComponents
This HOC injects a components
that you to access specific platform components.
Example usage:
import React from 'react'import withComponents from 'react-agnostic' const UpdateCartItem = item updateCartItem components const Button Text View = components return updateCartItem ? <View> <Button = = > - </Button> <Text>itemamount</Text> <Button = > + </Button> </View> : <Text>itemamount</Text> UpdateCartItem
Inspiration
Repository based on kcd-oss
Blog with many react supported renderers: https://dev.to/kayis/react-can-do-it-31di
Renderers
- react-native
- react-native-windows
- react-primitives
- reactxp
- react-blessed
- react-blessed
- react-pdf
- redocx
- react-360
Other Solutions
I'm not aware of any, if you are please make a pull request and add it here!
Contributors
Thanks goes to these people (emoji key):
Vicente de Alencar 💻 📖 🚇 ⚠️ |
---|
This project follows the all-contributors specification. Contributions of any kind welcome!
LICENSE
MIT