react-feather#Trash2 TypeScript Examples

The following examples show how to use react-feather#Trash2. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: MissingStatsLayout.tsx From calories-in with MIT License

6 votes

function MissingStatsLayout({ onRemoveRequest }: Props) {
  return (
    <Flex width="100%" justifyContent="space-between" align="center">
      <Text fontSize="md" textColor="red.400" ml={3}>
        Food not found
      </Text>

      <Button
        mr={3}
        alignSelf="flex-end"
        variant="ghost"
        colorScheme="red"
        size="sm"
        onClick={onRemoveRequest}
        leftIcon={<Trash2 size={16} />}
      >
        Remove
      </Button>
    </Flex>
  )
}

Example #2

Source File: MetaFile.tsx From gear-js with GNU General Public License v3.0

5 votes

MetaFile = (props: Props) => {
  const alert = useAlert();
  const metaFieldRef = useRef<HTMLInputElement>(null);

  const { file, className, onUpload, onDelete } = props;

  const uploadMetaFile = () => {
    metaFieldRef.current?.click();
  };

  const handleChangeMetaFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (event.target.files && event.target.files.length) {
      const isCorrectFormat = checkFileFormat(event.target.files[0]);

      if (isCorrectFormat) {
        onUpload(event.target.files[0]);
      } else {
        alert.error('Wrong file format');
      }

      event.target.value = '';
    }
  };

  return (
    <div className={clsx(styles.upload, className)}>
      <label htmlFor="meta" className={styles.caption}>
        Metadata file:
      </label>
      <div className={styles.block}>
        <Field
          id="meta"
          name="meta"
          className={styles.hidden}
          type="file"
          innerRef={metaFieldRef}
          onChange={handleChangeMetaFile}
        />
        {file ? (
          <div className={clsx(styles.value, styles.filename)}>
            {file.name}
            <button type="button" onClick={onDelete}>
              <Trash2 color="#ffffff" size="20" strokeWidth="1" />
            </button>
          </div>
        ) : (
          <Button
            text="Select file"
            type="button"
            color="secondary"
            className={styles.button}
            onClick={uploadMetaFile}
          />
        )}
      </div>
    </div>
  );
}

Example #3

Source File: getMenuOrDrawerItems.tsx From calories-in with MIT License

5 votes

Trash2Styled = chakra(Trash2)

Example #4

Source File: getMenuOrDrawerItems.tsx From calories-in with MIT License

5 votes

Trash2Styled = chakra(Trash2)

Example #5

Source File: getMenuOrDrawerItems.tsx From calories-in with MIT License

5 votes

Trash2Styled = chakra(Trash2)