Clarity-89

Clarity-89

gl particle sns icons.

A Pen by Kenji Saito on CodePen.

License.

Clarity-89

import React from 'react';
import { NavModel } from '@grafana/data';
import { updateLocation } from 'app/core/actions';
import { mockToolkitActionCreator } from '../../../test/core/redux/mocks';
import { Props, ReportsSettingsPage } from './ReportsSettingsPage';

beforeEach(() => {
  jest.clearAllMocks();
});

Clarity-89

import React from "react";
import styled from "@emotion/styled";
import { useForm } from "react-hook-form";

export const Recipe = () => {
  return (
    <Container>
      <h1>New recipe</Title>
    </Container>
  );

Clarity-89

// FieldSet.js

export const FieldSet = ({ label, children }) => {
  return (
    <Container>
      {label && <Legend>{label}</Legend>}
      <Wrapper>{children}</Wrapper>
    </Container>
  );
};

Clarity-89

import React from "react";
import styled from "@emotion/styled";
import { Button, Form } from "semantic-ui-react";
import { FieldSet } from "./FieldSet";

const fieldWidth = 8;

export const Recipe = () => {
  return (
    <Container>

Clarity-89

import React from "react";
import styled from "@emotion/styled";
import { Button, Form } from "semantic-ui-react";
import { FieldSet } from "./FieldSet";
import { useForm } from "react-hook-form";

const fieldWidth = 8;

export const Recipe = () => {
  const { register, handleSubmit } = useForm();

Clarity-89

<input type="text" name="name" id="name" ref={register({required: true})} /> 

Clarity-89

ref={register({required: 'This field is required'})}

Clarity-89

export const Recipe = () => {
  const { register, handleSubmit, errors } = useForm();

  const submitForm = formData => {
    console.log(formData);
  };

  return (
    <Container>
      <h1>New recipe</h1>