Render Props React

Use hooks inline in React/JSX.

The purpose is to provide an anonymous component that can be code inline and easily retrieve the variables of the parent component without passing them through props.

Usage

export function UseStateExample() {
  const [data, setData] = useState([]);

  return (
    <div>
      <h1>UseState Example</h1>
      <$>
        {
          () => {
            // inline hooks
            const [value, setValue] = useState('');

            // any react hooks or custom hooks
            return (
              <>
                <input value={value} onChange={(e) => setValue(e.target.value)} />
                {data}
              </>
            )
          }
        }
      </$>
      <footer>some things</footer>
    </div>
  );
}

example

the actual project like this

function Component(props: {
  data: string;
  titleRender: () => ReactNode;
}) {
  return (
    <div>
      <p>{data}</p>
      {props.titleRender()}
    </div>
  )
}

function App() {
  return (
    <div>
      <Component
        titleRender={() => {
          // inline hooks for Component self
          const [value, setValue] = useState('');

          // any react hooks or custom hooks
          return (
            <div></div>
          )
        }}
        data="hello"
      />
    </div>
  )
}

License

MIT

References

react-async-render-props render-hooks