React-Pond

Use the Actyx Pond framework fully integrated into React. Expand your toolchain with <Pond>, useFish, and usePond to speed up your UI projects and write distributed apps in a couple of hours.

📦 Installation

React-Pond is available as a npm package.

npm install @actyx-contrib/react-pond

📖 Documentation and detailed examples

You can access the full API documentation and related examples by visiting: https://actyx-contrib.github.io/react-pond

You will find detailed examples here. They can be executed running e.g. `npm run example:chatRoom'.

🤓 Quick start

🌊 <Pond>...</Pond>

Wrap your application with the <Pond> to use you fish everywhere in the code.

Example

ReactDOM.render(
  <Pond
    manifest={{
      appId: 'com.example.react-pond-example',
      displayName: 'React Pond Example',
      version: '0.0.1'
    }}
    onError={() => {
      setTimeout(() => location.reload(), 5000)
      return <div>Connection to Actyx rejected: {JSON.stringify(e)}. Next reconnect in 5 seconds.</div>
    }}
  >
    <AmazingDistributedApp />
  </Pond>,
  document.getElementById('root')!,
)

🐟 useFish and useFishFn

Write your distributed logic with the well-known fish and get the state as easy as possible.

• useFish(fish): Hydrate one explicit fish without a factory
• useFishFn(fishFactory, properties): Use a factory function to hydrate fish with properties

📖 Example

const MaterialRequest = ({ id }: Props) => {
  const allOpenMatReq = useFish(MatRequest.allOpen)
  const matReq = useFishFn(MatRequest.of, id)

  return (
    <div>
      <div>Open Material Requests: {allOpenMatReq.ids.length}</div>
      <div>
        Material Request ({id}): {matReq.state.status}
      </div>
      <button
        onClick={() =>
          matReq.run((_state, enqueue) => enqueue(Tag('material').withId(id), EventType.Done))
        }
      >
        Done
      </button>
    </div>
  )
}

🎏 useRegistryFish

Map your registry fish to the entities and create tables, lists, complex autocomplete fields, ...

📖 Example

const MaterialRequests = () => {
  const allOpenMatReq = useRegistryFish(MatRequest.allOpen, reg => reg.ids, MatRequestFish.of)

  const done = (matReq: ReactFish<State, Events, string>) => {
    matReq.run((_state, enqueue) => enqueue(Tag('material').withId(matReq.props), EventType.Done))
  }

  return (
    <div>
      <div>Open Material Requests: {allOpenMatReq.length}</div>
      {allOpenMatReq.map(matReq => (
        <div key={matReq.props}>
          <div>
            {matReq.props}: {matReq.state.status}
          </div>
          <button onClick={() => done(matReq)}>Done</button>
        </div>
      ))}
    </div>
  )
}

🌊 usePond

The pond is not hidden from you. Use it as usual with const pond = usePond().

📖 Example

export const App = () => {
  const pond = usePond()
  const { info, getPondState } = pond 
  const [pondState, setPondState] = React.useState<PondState>()
  React.useEffect(() => {
    getPondState(setPondState)
  }, [])

  return (
    <div>
      <hr />
      <h3>Pond State</h3>
      <pre>{JSON.stringify(pondState, undefined, 2)}</pre>
      <hr />
      <h3>Pond Info</h3>
      <pre>{JSON.stringify(info(), undefined, 2)}</pre>
    </div>
  )
}