Add docs for useConnect and update connect
#61
Conversation
|
Some code was autoformatted, I guess that's not a problem for Gitbook, right? cc: @juanmaguitar, @mburridge |
docs/api-reference-1/frontity.md
Outdated
| ``` | ||
|
|
||
| It's a function that receives a React component an returns the same component but connected to the Frontity state, actions and libraries. Any instance of that component will receive three new props: `state`, `actions` and `libraries`, allowing the component to read the state, manipulate it through actions or use any code other packages have exposed in libraries. Also, that instance will re-render automatically whenever the value of `state` which the component is using is changed. | ||
|
|
||
| If you don't want to inject new props in your components, you can use the `injectProps` option set to `false`. That will make your component reactive to changes in the state but without passing new props. For these components to access the state use the [`useConnect`](frontity.md#useConnect) hook. |
There was a problem hiding this comment.
Could you clarify what you mean by "without passing new props" ? Which new props is it referring to? Does that mean that the value of the state props is never going to be updated in components with {injectProps: false} ?
Edit: I see that you clarify it below, but I would put it here as well 🙂
There was a problem hiding this comment.
I'll do that, thanks Michal 👍
|
I slightly changed the docs, I hope it's more clear now. @michalczaplinski, @juanmaguitar could you review this? |
|
Thanks! |
|
Hey guys, just to clarify this, people don't need to use And I think it should not be recommended, except for the case where you want to pass down props to a HTML tag, like: const Input = ({ state, ...restProps}) => {
// Do something with `state`.
return <input {...restProps} />
};
export default connect(Input);Because in this case, const Input = (props) => {
const { state } = useConnect();
// Do something with `state`.
return <input {...props} />
};
// In this case, avoid injecting `state`, `actions` and `libraries` so they are not in `...props`.
export default connect(Input, { injectProps: false });The rest of the time, people should use just const Input = ({ name, type }) => {
const { state } = useConnect();
// Do something with `state`.
return <input name={name} type={type} />
};
export default connect(Input);@juanmaguitar could you please clarifying this in the docs? |
|
@luisherranz @DAreRodz clarification added → #71 |
Documentation for frontity/frontity#404