React OG Forms

Forms lib made by OG Developer using typescript, styled-components and react-dropzone

Main reference for construction is "Upload Files by Diego Fernandes from Rocketseat"🚀

Install

npm install --save react-og-forms

yarn add react-og-forms

Setup


            :root {
              --title-font: Roboto;
              --content-font: Nunito;
            }

Input Form


          import React, { useState } from 'react'

          import Form, { Input, Item, Switch } from 'react-og-forms'

          function Index() {
            const [blocked, setBlocked] = useState(true)

            return (
              <Form>
                <Item>
                  Nome
                  <Input value='OG Form' />
                </Item>
                <Item>
                  E-Mail
                  <Input type='email' value='odenirdev@gmail.com' status={true} />
                </Item>
                <Item>
                  <Input
                    placeholder='Confirmar senha'
                    type='password'
                    value='GFEDCBA'
                    status={false}
                  />
                </Item>
                <Item>
                  <Switch
                    label='Bloqueado'
                    value={blocked}
                    onChange={(value) => setBlocked(value)}
                  />
                </Item>
              </Form>
            )
          }

          export default Index

Input File

Clique ou Arraste arquivos aqui...


            import React, { useState } from 'react'
            import Styled from 'styled-components'
            import { File } from 'react-og-forms'

            import UploadedFile from 'react-og-forms/dist/interfaces/UploadedFile'

            const Container = Styled.div

            function Index() {
              const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([])

              return (
                <Container>
                  <File
                    accept='image/*'
                    value={uploadedFiles}
                    onChange={(files: UploadedFile[]) => setUploadedFiles(files)}
                    baseUrl='https://localhost:1337'
                    headers={{
                      Authorization: ''
                    }}
                  />
                </Container>
              )
            }

            export default Index

Input File Multiple

Clique ou Arraste arquivos aqui...


            import React, { useState } from 'react'
            import Styled from 'styled-components'
            import { File } from 'react-og-forms'
            import UploadFile from 'react-og-forms/dist/interfaces/UploadedFile'

            const Container = Styled.div

            function Index() {
              const [file, setFile] = useState<UploadFile[]>([])

              return (
                <Container>
                  <File
                    accept='image/*'
                    value={file}
                    onChange={(file: UploadFile[]) => {
                      setFile(file)
                    }}
                    baseUrl='https://localhost:1337'
                    headers={{
                      Authorization: ''
                    }}
                    multiple={true}
                  />
                </Container>
              )
            }

            export default Index