Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/indatawetrust/preact-codemirror
Simple and lightweight CodeMirror component for Preact
https://github.com/indatawetrust/preact-codemirror
codemirror codemirror-component preact preact-components
Last synced: 21 days ago
JSON representation
Simple and lightweight CodeMirror component for Preact
- Host: GitHub
- URL: https://github.com/indatawetrust/preact-codemirror
- Owner: indatawetrust
- License: mit
- Created: 2018-08-03T11:14:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-16T08:07:58.000Z (about 6 years ago)
- Last Synced: 2024-11-15T23:06:02.239Z (about 2 months ago)
- Topics: codemirror, codemirror-component, preact, preact-components
- Language: JavaScript
- Size: 7.81 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# preact-codemirror
> Simple and lightweight CodeMirror component for Preact; for :atom_symbol: [Preact](https://github.com/developit/preact)
## Usage
[languages](https://github.com/codemirror/CodeMirror/tree/master/mode)
[themes](https://github.com/codemirror/CodeMirror/tree/master/theme)```jsx
const { h, Component, render } = require("preact");
import CodeMirror from "preact-codemirror";// import language
import "codemirror/mode/sql/sql.js";// import theme
import "codemirror/theme/dracula.css";function loadStyleSheet(url) {
var sheet = document.createElement("link");
sheet.rel = "stylesheet";
sheet.href = url;
sheet.type = "text/css";
document.head.appendChild(sheet);
var _timer;// TODO: handle failure
return new Promise(function(resolve) {
sheet.onload = resolve;
sheet.addEventListener("load", resolve);
sheet.onreadystatechange = function() {
if (sheet.readyState === "loaded" || sheet.readyState === "complete") {
resolve();
}
};_timer = setInterval(function() {
try {
for (var i = 0; i < document.styleSheets.length; i++)
if (document.styleSheets[i].href === sheet.href) resolve();
} catch (e) {
/* the stylesheet wasn't loaded */
}
}, 250);
}).then(function() {
clearInterval(_timer);
return sheet;
});
}class Demo extends Component {
state = {
currentTheme: "mbo",
themes: [
"3024-day",
"3024-night",
"abcdef",
"ambiance-mobile",
"ambiance",
"base16-dark",
"base16-light",
"bespin",
"blackboard",
"cobalt",
"colorforth",
"darcula",
"dracula",
"duotone-dark",
"duotone-light",
"eclipse",
"elegant",
"erlang-dark",
"gruvbox-dark",
"hopscotch",
"icecoder",
"idea",
"isotope",
"lesser-dark",
"liquibyte",
"lucario",
"material",
"mbo",
"mdn-like",
"midnight",
"monokai",
"neat",
"neo",
"night",
"oceanic-next",
"panda-syntax",
"paraiso-dark",
"paraiso-light",
"pastel-on-dark",
"railscasts",
"rubyblue",
"seti",
"shadowfox",
"solarized",
"ssms",
"the-matrix",
"tomorrow-night-bright",
"tomorrow-night-eighties",
"ttcn",
"twilight",
"vibrant-ink",
"xq-dark",
"xq-light",
"yeti",
"zenburn"
],
code: `
SELECT 'Customer' As Type,
FirstName + ' ' + LastName AS ContactName,
City, Country, Phone
FROM Customer
UNION
SELECT 'Supplier',
ContactName, City, Country, Phone
FROM Supplier
`
};
componentWillMount() {
loadStyleSheet(
`https://codemirror.net/theme/${this.state.currentTheme}.css`
);
}
themeChange = e => {
this.setState(
{
currentTheme: e.target.value
},
() => {
loadStyleSheet(`https://codemirror.net/theme/${e.target.value}.css`);
}
);
};
render(props, state) {
return (
{state.themes.map(item => (
{item}
))}
{
instance.on("change", () => {
console.log(instance.getValue());
});
}}
/>
);
}
}render(, document.body);
```[![Edit mzn9j60m48](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/mzn9j60m48)
## Install
```
$ npm install --save preact-codemirror
``````html
```
## Properties
#### code
Type: `String`#### config
Type: `Object`#### instance
Type: `Function`## License
MIT © [Ahmet Şimşek](https://github.com/indatawetrust)