react pull to refresh

REACT-PULL-TO-REFRESH

npm install react-pull-to-refresh -S

Uma tração para atualizar o componente para a web.

Baseado na atração de Andy Peatling para atualizar para a web

Uso

Sua função de manipulador de atualização recebe resolve e reject para informar ao componente PulltoreFresh quando terminar.

 async handleRefresh ( ) {
  await asyncCode ( ) ;
}

Onde você deseja renderizar o componente:

 < ReactPullToRefresh onRefresh = { handleRefresh } className = "your-own-class-if-you-want" style = { { textAlign : 'center' } } >
  < h3 > Pull down to refresh < / h3>
  < div > { items } < / div>
  < div > etc . < / div>
< / ReactPullToRefresh>

CSS

Use o CSS do exemplo como ponto de partida.

Todos os adereços

 export interface ReactPullToRefreshProps extends HTMLAttributes < HTMLDivElement > {
  onRefresh : ( ) => Promise < void > ;
  icon ?: ReactNode ;
  loading ?: ReactNode ;
  disabled ?: boolean ;
  distanceToRefresh ?: number ;
  resistance ?: number ;
  hammerOptions ?: {
    cssProps ?: CssProps | undefined ;
    domEvents ?: boolean | undefined ;
    enable ?: boolean | ( ( manager :  HammerManager ) => boolean ) | undefined ;
    preset ?: RecognizerTuple [ ] | undefined ;
    touchAction ?: string | undefined ;
    recognizers ?: RecognizerTuple [ ] | undefined ;
    inputClass ?: HammerInput | undefined ;
    inputTarget ?: EventTarget | undefined ;
  }

• onRefresh : () => Promise<void>
• Ícone : ReactNode
  • padrão:

   < span className =" genericon genericon-next " > </ span >

• Carregamento : ReactNode
  • padrão:

   < div className =" loading " >
    < span className =" loading-ptr-1 " > </ span >
    < span className =" loading-ptr-2 " > </ span >
    < span className =" loading-ptr-3 " > </ span >
  </ div >

• desativado : boolean
• ClassName : string
• Estilo : object
• DistancetoreFresh : number
  • Padrão : 70
• Resistência : number
  • Padrão : 2.5
• Hammerroptions : HammerOptions

   interface HammerOptions {
    cssProps ?: CssProps | undefined ;
    domEvents ?: boolean | undefined ;
    enable ?: boolean | ( ( manager : HammerManager ) => boolean ) | undefined ;
    preset ?: RecognizerTuple [ ] | undefined ;
    touchAction ?: string | undefined ;
    recognizers ?: RecognizerTuple [ ] | undefined ;
    inputClass ?: HammerInput | undefined ;
    inputTarget ?: EventTarget | undefined ;
  } 

Executando o código

1. Confira o repo
2. Execute npm install
3. Run npm run play para abrir o código de /playground

Obrigado

Andy Peatling