@getoccasion/mitragyna

ActiveResource.js binding framework for React components

Installation

yarn add @getoccasion/mitragyna

You can also use the CDN address https://unpkg.com/@getoccasion/mitragyna to add it to your AMD loader or into your page:

<script type="text/javascript" src="https://unpkg.com/@getoccasion/mitragyna"></script>

Getting Started

• Set a resource, and attach a child component to render with that subject

<Resource component={Customer} reflection="customer" subject={customer} />

• Have a field in the child component that responds to the subject from the parent Resource

  <Field
    type="email"
    name="email"
    id="email"
    component={Input}
    invalidClassName="is-invalid"
    placeholder="[e-mail]"
  />
  <ErrorsFor className="customer-email-errors" component={FormFeedback} field="email" />

• You can nest Resources with setting a reflection

<Resource component={Customer} reflection="customer" subject={customer} />

• Bind some callback logic to the (root) resource

• afterError: PropTypes.func
• afterUpdate: PropTypes.func
• onInvalidSubmit: PropTypes.func
• onSubmit: PropTypes.func
• beforeSubmit: PropTypes.func

If using nested resources

<Resource component={Customer} reflection="customer" subject={subject.customer()} parent={subject} />

Binding and updating values from Fields

const fulfillmentType = useRef()

// Render <Input> component for value that keeps subject up to date
<Field
  type="hidden"
  name="fulfillmentType"
  id="fulfillmentType"
  component={Input}
  ref={fulfillmentType}
/>

// Get value
fulfillmentType.current && fulfillmentType.current.state.value

// Update value
fulfillmentType.current && fulfillmentType.current.setValue('value here')