t3rabyt3 / react-in-out-textarea

A simple React.js component that is like Google Translate with full TypeScript Support

react-in-out-textarea

A simple React.js component that is like Google Translate

Used by

• caseconverter.pro

Usage

React + TypeScript

CodeSandbox Example

Code Example:

import React, { useState } from 'react';
import { InOutTextarea, InOptions, OutOptions } from 'react-in-out-textarea';

export const ExampleComponent = () => {
  const [inValue, setInValue] = useState<string>('');
  const [outValue, setOutValue] = useState<string>('');
  const [inOptions, setInOptions] = useState<InOptions>([
    {
      name: 'English',
      active: true,
    },
    {
      name: 'German',
      active: false,
    },
  ]);
  const [outOptions, setOutOptions] = useState<OutOptions>([
    {
      name: 'Chinese',
      active: true,
      activeClicked: false,
    },
  ]);

  return (
    <InOutTextarea
      inValue={inValue}
      outValue={outValue}
      onInInput={newValue => {
        setInValue(newValue);
        setOutValue(newValue);
      }}
      inOptions={inOptions}
      onInOptionsUpdate={newInOptions => {
        setInOptions(newInOptions);
      }}
      outOptions={outOptions}
      onOutOptionsUpdate={newOutOptions => {
        setOutOptions(newOutOptions);
      }}
    />
  );
};

Development

To start developing you need the following tools installed:

• Node.js version 12 - Download
• yarn - Download

After installing all the tools, you can install all dependencies by using in your terminal

yarn

After that just type:

yarn storybook

And open http://localhost:6006/. That should give you the storybook preview.s

Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, Angular, and more. It makes building stunning UIs organized and efficient.

Storybook is a tool used here for easy development of components for the web. Since this project uses React.js, the decision for storybook was kind of easy. It makes the development workflow seamless.

Our stories are saved under the ./stories directory. Feel free to have a look.

License

The code is licensed under MIT.