react-codeflask

A micro code-editor for awesome web pages.

installation

npm install -S @jswork/react-codeflask

usage

1. import css

@import "~@jswork/react-codeflask/dist/style.css";

// or use sass
@import "~@jswork/react-codeflask/dist/style.scss";

// customize your styles:
$react-codeflask-options: ()

2. import js

import React, { useState } from 'react';
import ReactCodeflask from '@jswork/react-codeflask';
import '../../src/components/style.scss';
import styled from 'styled-components';
// import 'prismjs/themes/prism.css';

const Container = styled.div`
  width: 80%;
  margin: 30px auto 0;

  > .is-actions {
    margin-top: 10px;
  }
`;

export default () => {
  const [val, setVal] = useState(
    `curl 'https://api.cdnjs.com/libraries/backbone.js/tutorials/this-tutorial-doesnt-exist' | json`
  );
  return (
    <Container>
      <ReactCodeflask
        value={val}
        height={0}
        language="js"
        onChange={(e) => {
          // console.log('current value:', e.target.value);
          setVal(e.target.value);
        }}
      />

      <div className="is-actions">
        <button
          onClick={(e) => {
            setVal('const for="bar"; \nlet bar="bc";');
          }}>
          Set value.
        </button>
      </div>
    </Container>
  );
};

preview

• https://afeiship.github.io/react-codeflask/

license

Code released under the MIT license.