1.0.15 • Published 7 months ago
@jswork/react-codeflask v1.0.15
react-codeflask
A micro code-editor for awesome web pages.
installation
npm install -S @jswork/react-codeflask
usage
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: ()
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
license
Code released under the MIT license.