useClipboard | NativeBase

NativeBase

3.4.x

⌘

Hire us

NativeBase

Introduction

Getting Started

Installation

Setup NativeBase Provider

Resources

Core Concepts

Features

Color mode (Dark Mode)

Theme

Customizing Components

Making components dark mode compatible

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Media and Icons

Transition

Others

ReactNative Components

Hooks

Examples

Community Integration

React Hook Forms

Formik

Recipes

Designs

Forms

Layout

Migration

Components Migration

If you are starting a new project, please try gluestack-ui for better performance and new design.

useClipboard

useClipboard is a custom hook that handles copying content to clipboard.

Return Value

The useClipboard hook returns an object with the following fields:

value : ( string ) The copied value.

onCopy : ( Function ) Callback function to copy content.

hasCopied : ( boolean ) If true, the content has been copied.

Import

Copy
import { useClipboard } from 'native-base';

Usage


Playground
function UseClipboardExample() {
  const [copyText, setCopyText] = React.useState('Copy Me');
  const [pasteText, setPasteText] = React.useState('');
  const {
    value,
    onCopy,
    hasCopied
  } = useClipboard();
  return <VStack space={2} mx={2}>
      <HStack space={3}>
        <Input w="60%" placeholder="Copy From" onChangeText={v => setCopyText(v)} value={copyText} />
        <Button onPress={() => onCopy(copyText)}>Copy</Button>
      </HStack>
      <HStack space={3}>
        <Text>{hasCopied ? 'Copied' : 'Press here'}</Text>
        <Input w="60%" placeholder="Paste To" onChangeText={v => setPasteText(v)} value={pasteText} />
        <Button onPress={() => setPasteText(value)}>Paste</Button>
      </HStack>
    </VStack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseClipboardExample />
      </Center>
    </NativeBaseProvider>;
}function UseClipboardExample() {
  const [copyText, setCopyText] = React.useState('Copy Me');
  const [pasteText, setPasteText] = React.useState('');
  const {
    value,
    onCopy,
    hasCopied
  } = useClipboard();
  return <VStack space={2} mx={2}>
      <HStack space={3}>
        <Input w="60%" placeholder="Copy From" onChangeText={v => setCopyText(v)} value={copyText} />
        <Button onPress={() => onCopy(copyText)}>Copy</Button>
      </HStack>
      <HStack space={3}>
        <Text>{hasCopied ? 'Copied' : 'Press here'}</Text>
        <Input w="60%" placeholder="Paste To" onChangeText={v => setPasteText(v)} value={pasteText} />
        <Button onPress={() => setPasteText(value)}>Paste</Button>
      </HStack>
    </VStack>;
}

function Example() {
  return <NativeBaseProvider>
      <Center flex={1}>
        <UseClipboardExample />
      </Center>
    </NativeBaseProvider>;
}

Quick Nav

useClipboard | NativeBase | Universal Components for React and React Native