Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexkrolick/react-renderless
Utilities for creating and working with renderless React components
https://github.com/alexkrolick/react-renderless
composition hoc react reducer render-prop renderless-components state state-management stateprovider-component
Last synced: about 2 months ago
JSON representation
Utilities for creating and working with renderless React components
- Host: GitHub
- URL: https://github.com/alexkrolick/react-renderless
- Owner: alexkrolick
- License: mit
- Created: 2017-09-28T07:15:20.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-15T19:12:12.000Z (over 6 years ago)
- Last Synced: 2024-06-24T08:35:31.076Z (3 months ago)
- Topics: composition, hoc, react, reducer, render-prop, renderless-components, state, state-management, stateprovider-component
- Language: JavaScript
- Homepage:
- Size: 38.1 KB
- Stars: 40
- Watchers: 3
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-headless-components - React Renderless
README
# react-renderless 🖇
Utilities for creating and working with renderless React components.
*What is a "renderless component"?* A renderless component is the opposite of a stateless component. It does not implement a render method. Instead, renderless components are composed with stateless functional components to create UI elements.
- [Usage](#usage)
- [API](#api)
- [StateProvider Component](#stateprovider-component)
- [withRender Higher-Order Component](#withrender-higher-order-component)
- [Examples](#examples)
- [Textboxes](#textboxes-codepen)
- [Reducer](#reducer-codepen)
- [More Examples on Codepen](#more-examples-on-codepen)
- [Inspiration](#inspiration)
- [License](#license)
## Usage
### Script
```html
```
```jsx
const { StateProvider, withRender } = reactRenderless
```
### Package
```bash
yarn add react-renderless
# OR
npm install --save react-renderless
```
```jsx
// commonjs
const { StateProvider, withRender } = require("react-renderless")
// es module
import { StateProvider, withRender } from "react-renderless"
```
## API
### StateProvider Component
Instead of extending React.Component for renderless components, extend StateProvider.
```js
StateProvider.propTypes = {
children: PropTypes.func, // pass either children or render
render: PropTypes.func, // pass either children or render
initialState: PropTypes.object, // optional
}
```
- The [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) will be called with 2 arguments: `(props, context)` where props is `{...this.props, ...this.state, ...this.handlers}`. The prop should either be `render` or the only child of the parent. The render prop must return an element when called (not a component class)!
- Initial state: The component's initial state can be set by passing a prop or by setting an `initialState` getter on the class.
- Handlers: An object that provides all the actions needed to modify the state. It is initiated one time, at mount. Handlers that need to be bound to the component instance should use arrow functions for declaration. (This will _not_ create additional functions in each render.)
```jsx
class SimpleState extends StateProvider {
get initialState() {
return {
foo: "bar",
};
}
get handlers() {
return {
set: (key, value) => this.setState({ [key]: value }),
};
}
}
const App = () => (
{foo}}
initialState={{foo: 'baz'}}
/>
)
// renders "baz" because the initialState prop overrides the getter
```
### withRender Higher-Order Component
`withRender` combines a container and presenter (renderless and stateless) into a new component that acts like a normal React component. Under the hood it simply passes the presenter as the render prop to the renderless component.
```jsx
const Combined = withRender(MyStateProvider, MyRenderFunction)
const App = () =>
```
`withRender` is curried so it can either be with 1 argument to create a factory for a stateful component or 2 to create a new component immediately.
```jsx
const textStateFactory = withRender(TextState)
const TextInput = textStateFactory(Input)
const BigTextInput = textStateFactory(BigInput)
```
## Examples
#### Textboxes [Codepen](https://codepen.io/alexkrolick/pen/RLVprZ/)
[
](https://codepen.io/alexkrolick/pen/RLVprZ/)
```jsx
const Input = ({ text, setText }) => ;
class Text extends StateProvider {
get handlers() {
return {
setText: e => this.setState({ text: e.target.value })
};
}
}
class UpperText extends StateProvider {
get initialState() {
return {
text: ""
};
}
get handlers() {
return {
setText: e => this.setState({ text: e.target.value.toUpperCase() })
};
}
}
class LowerText extends StateProvider {
get handlers() {
return {
setText: e => this.setState({ text: e.target.value.toLowerCase() })
};
}
}
const TextInput = props => {Input};
const UpperTextInput = withRender(UpperText, Input);
const App = () => (
TextInput
UpperTextInput
LowerTextInput
);
ReactDOM.render(, document.body);
```
### Reducer [Codepen](https://codepen.io/alexkrolick/pen/eGWEXZ?editors=0010)
[
](https://codepen.io/alexkrolick/pen/eGWEXZ?editors=0010)
```jsx
const { StateProvider, withRender } = reactRenderless;
class Reducer extends StateProvider {
get handlers() {
const reducer = {
"foo:update": ({ foo }) => ({ foo: foo }),
"bar:inc": () => ({ bar }) => ({ bar: bar + 1 }),
"bar:dec": () => ({ bar }) => ({ bar: bar - 1 })
};
return {
action: (type, payload) => {
if (!reducer[type]) return this.setState({});
this.setState(reducer[type](payload));
}
};
}
}
const App = () => (
{({ action, ...state }) => (
FooÂ
action("foo:update", e.target.value)}
value={state.foo}
/>
BarÂ
action("bar:dec")}>-
{state.bar}
action("bar:inc")}>+
)}
);
ReactDOM.render(, document.body);
```
### More Examples on Codepen
- Global reducer using [React-Broadcast](https://github.com/ReactTraining/react-broadcast): https://codepen.io/alexkrolick/pen/NaYaXj
- Nested, auto-namespaced global reducers: https://codepen.io/alexkrolick/pen/MEvGWG
## Inspiration
- [Recompose](https://github.com/acdlite/recompose) by Andrew Clark
- [React Powerplug](https://github.com/renatorib/react-powerplug) by Renato Ribeiro
- [Use a Render Prop!](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) by Michael Jackson
## Similar
- [Unstated](https://github.com/jamiebuilds/unstated) by Jamie Kyle
## License
[MIT](./LICENSE)