useClipboard | NativeBase

NativeBase

3.4.x

Search

⌘

K

Introduction

Setup NativeBase Provider

Resources

Contribution

Creating a Universal App with NativeBase and Solito

New

Core Concepts

Utility First

Utility Props Specificity

Design Tokens

Pseudo Props: Overview

Pseudo Props: Dos & Don'ts

Internal Pseudo Props

New

Responsive

Features

Utility Props

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

Recipes

Designs

Forms

Layout

More

IMPORTANT MESSAGE — If you are starting a new project with NativeBase, we recommend using gluestack instead.

Explore gluestack

Know More

useClipboard

useClipboard controls and regulates the copying of content to the 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
const Example = () => {
  const [copyText, setCopyText] = React.useState("Hello");
  const [pasteText, setPasteText] = React.useState("");
  const {
    value,
    onCopy
  } = useClipboard();
  return <Center>
      <VStack space={2} w="100%" maxW="300">
        <HStack space={3}>
          <Input placeholder="Copy From" onChangeText={v => setCopyText(v)} value={copyText} />
          <Button onPress={() => onCopy(copyText)}>Copy</Button>
        </HStack>
        <HStack space={3}>
          <Input placeholder="Paste Here" onChangeText={v => setPasteText(v)} value={pasteText} />
          <Button onPress={() => setPasteText(value)}>Paste</Button>
        </HStack>
      </VStack>
    </Center>;
};const Example = () => {
  const [copyText, setCopyText] = React.useState("Hello");
  const [pasteText, setPasteText] = React.useState("");
  const {
    value,
    onCopy
  } = useClipboard();
  return <Center>
      <VStack space={2} w="100%" maxW="300">
        <HStack space={3}>
          <Input placeholder="Copy From" onChangeText={v => setCopyText(v)} value={copyText} />
          <Button onPress={() => onCopy(copyText)}>Copy</Button>
        </HStack>
        <HStack space={3}>
          <Input placeholder="Paste Here" onChangeText={v => setPasteText(v)} value={pasteText} />
          <Button onPress={() => setPasteText(value)}>Paste</Button>
        </HStack>
      </VStack>
    </Center>;
};

Quick Nav

Return Value

Import

Usage

useClipboard | NativeBase | Universal Components for React and React Native