@ticketbutler/components v0.3.4

Ticketbutler components

Component library for all Ticketbutler React applications.

Contibuting

• install dependecies yarn
• add new code or make changes in the code
• if you want to run this file localy with another application, run yarn link and then yarn start
• in target application run yarn link tb-components
• the components and application are linked together!
• to unlink tb-components, run yarn unlink tb-components in the application

Components

• Form

Form

The form component wraps it's children in a HTML form tag. Therefore if a button with type="submit" in the children is clicked, the form will be submitted.

If you want to submit a form without clicking a submit button, you can use submitForm(e) to submit.

Use it like this:

import { Form } from "tb-components";

<Form>
  {({ values, updateForm }) => {
    return (
      <label htmlFor="email">
        <input
          id="email"
          value={values.email}
          onChange={e => {
            updateForm({ email: e.target.value });
          }}
        />
      </label>
    );
  }}
</Form>;

Common types

type UpdateForm = (value: { [string]: any }) => void;

type Values = { [string]: any };

type Conditions = "exists";

Props

url optional

string | (Values => string)

The url you want to send the values object to.

validateFields optional

{ [string]: Conditions }

Validate fields by key. Conditions are mapped to a validation function.

defaultValues optional

Used to set the initial values (Values) of the form.

onChange optional

Values => void

beforePost optional

Values => Values

onResponse optional

Values => void

valuesReducer optional

(Values, UpdateForm) => Values

MarketingButton

The MarketingButton has Ticketbutler marketing page style and hover arrow animation. The button component wraps it's children as it shoul be string: children: string. Therefore the button text it's children. To linked the button - should wrap MarketingButton in HTML tag.