satelcreative / formik-polaris Goto Github PK

View Code? Open in Web Editor NEW

23.0 3.0 5.0 1.07 MB

Polaris components with support for formik

License: MIT License

JavaScript 2.59% TypeScript 93.78% HTML 3.62%

formik polaris react typescript

formik-polaris's Introduction

Formik Polaris

This is a tiny library that improves how formik and @shopify/polaris work together

Installation

npm install @satel/formik-polaris

yarn add @satel/formik-polaris

formik-polaris also requires the following to have been installed separately:

if you need support for an older version, try out a 0.X.X release

Demo

Codesandbox Example

Usage

import React from 'react';
import ReactDOM from 'react-dom';
import { Formik, Form } from 'formik';
import { AppProvider, Card, Button } from '@shopify/polaris';
import { Checkbox, TextField, Select } from '@satel/formik-polaris';

enum Time {
  Today = 'today',
  Yesterday = 'yesterday',
  LastWeek = 'lastWeek',
}

const OPTIONS = [
  { label: 'Today', value: Time.Today },
  { label: 'Yesterday', value: Time.Yesterday },
  { label: 'Last 7 days', value: Time.LastWeek }
];

interface FormValues {
  title: string;
  published: boolean;
  time: Time;
}

function MyForm() {
  return (
    <Formik<FormValues>
      initialValues={{ title: '', published: false, time: Time.Today }}
      onSubmit={console.log}
    >
      {() => (
        <Form>
          <Card sectioned>
            <TextField label="Title" name="title" />
            <Checkbox label="Published" name="published" />
            <Select label="Time" name="time" options={OPTIONS} />
            <Button submit>Save</Button>
          </Card>
        </Form>
      )}
    </Formik>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AppProvider><MyForm /></AppProvider>, rootElement);

API

Checkbox

import { Checkbox } from '@satel/formik-polaris';

// ...

<Checkbox
  // Formik name (required)
  name="published"

  // Convert formik value to boolean (optional)
  decode={value => `${value}`}

  // Convert boolean to formik value (optional)
  decode={value => `${value}`}

  // Normal polaris Checkbox props
  {...props}
/>

Textfield

import { Textfield } from '@satel/formik-polaris';

// ...

<Textfield
  // Formik name (required)
  name="published"

  // Convert formik value to string (optional)
  decode={value => `${value}`}

  // Convert string to formik value (optional)
  decode={value => `${value}`}

  // Normal polaris Textfield props
  {...props}
/>

Select

import { Select } from '@satel/formik-polaris';

// ...

<Select
  // Formik name (required)
  name="published"

  // Convert formik value to string (optional)
  decode={value => `${value}`}

  // Convert string to formik value (optional)
  decode={value => `${value}`}

  // Normal polaris Textfield props
  {...props}
/>

RangeSlider

import { RangeSlider } from '@satel/formik-polaris';

// ...

<RangeSlider
  // Formik name (required)
  name="published"

  // Convert formik value to string (optional)
  decode={value => `${value}`}

  // Convert string to formik value (optional)
  decode={value => `${value}`}

  // Normal polaris RangeSlider props
  {...props}
/>

Licence

MIT - See LICENSE

formik-polaris's People

Contributors

Stargazers

Watchers

Forkers

baorv sempr kalisafalzone mitas1 scottkz

formik-polaris's Issues

Deprecation warning from Formik

Hi there, thanks for the nice wrapper, can you please also fix this warning. Doesn't seem like a lot of change.

Thanks.

<Field render> has been deprecated and will be removed in future versions of Formik. Please use a child callback function instead. To get rid of this warning, replace <Field name="company_name" render={({field, form}) => ...} /> with <Field name="company_name">{({field, form, meta}) => ...}</Field>

Allow overriding field id

Right now the name is used as the id of the text field, this causes react to complain if there are two inputs with the same name on the same page

Allow the id prop to override the default of name

Additional Components

Love this package! Do you have plans to add additional components that Shopify Polaris has like ChoiceList or Autocomplete? Or maybe you have them already?

Formik Polaris validates only when touch

Support more of formiks validation modes

Right now, formik-polaris only really supports the default

validateOnBlur === true
validateOnChange === false

It would be nice to support the other modes as well

I was the sole maintainer of this package while working at SatelCreative. We parted ways around a year ago now, so I don't expect formik-polaris will see another update. Updates never were all that consistent to begin with 😅.

I'd archive the repo but I no longer have permission (@hillairet maybe you could help me out?).

npm is reporting basically no weekly downloads at this point, so I doubt anyone will be majorly affected by this shocking news 😄

Cheers 🍻

use fomik 2 and hooks

an example:

import React, { useCallback } from 'react';
import { useField, useFormikContext } from 'formik';
import {
  TextField as PolarisTextField,
  TextFieldProps as PolarisTextFieldProps,
} from '@shopify/polaris';

export type TextFieldProps = Omit<
  PolarisTextFieldProps,
  'onChange' | 'value' | 'name'
> & {
  name: string;
};

export function TextField(props: TextFieldProps) {
  const { name } = props;
  const [field, meta] = useField(name);
  const { setFieldValue } = useFormikContext<{ [x: string]: string }>();

  const handleOnChange = useCallback(
    (text: string) => {
      setFieldValue(name, text);
    },
    [name, setFieldValue],
  );

  return (
    <PolarisTextField
      {...props}
      error={meta.error}
      onChange={handleOnChange}
      value={field.value}
    />
  );
}