React-og-forms NPM

react-og-forms

Forms lib made by OG Developer using typescript, styled-components and react-dropzone
Main reference for construction access at "Upload Files by Diego Fernandes from Rocketseat"

Documentation

Install

npm install --save react-og-forms

or

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

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:
            'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjA0NjEzMzUyLCJleHAiOjE2MDcyMDUzNTJ9.8M00WmsOOK_q9toenddLMEp57VG5DwEEdOtDRk5MieM'
        }}
      />
    </Container>
  )
}

export default Index

Input File Multiple

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:
            'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNjA0NjEzMzUyLCJleHAiOjE2MDcyMDUzNTJ9.8M00WmsOOK_q9toenddLMEp57VG5DwEEdOtDRk5MieM'
        }}
        multiple={true}
      />
    </Container>
  )
}

export default Index