npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-codemirror2

v6.0.0

a tiny react codemirror component wrapper

Downloads

505,805

Readme

Build Status Dependency Status DevDependency Status Coverage Downloads NPM Version

react-codemirror2

demo @ scniro.github.io/react-codemirror2

npm install react-codemirror2 codemirror --save

react-codemirror2 ships with the notion of an uncontrolled and controlled component. UnControlled consists of a simple wrapper largely powered by the inner workings of codemirror itself, while Controlled will demand state management from the user, preventing codemirror changes unless properly handled via value. The latter will offer more control and likely be more appropriate with redux heavy apps.

uncontrolled usage

import {UnControlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value='<h1>I ♥ react-codemirror2</h1>'
  options={{
    mode: 'xml',
    theme: 'material',
    lineNumbers: true
  }}
  onChange={(editor, data, value) => {
  }}
/>

controlled usage

import {Controlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }}
  onChange={(editor, data, value) => {
  }}
/>

requiring codemirror resources

codemirror comes as a peer dependency, meaning you'll need to require it in your project in addition to react-codemirror2. This prevents any versioning conflicts that would arise if codemirror came as a dependency through this wrapper. It's been observed that version mismatches can cause difficult to trace issues such as sytax highlighting disappearing without any explicit errors/warnings

  • additional

Since codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain language modes and themes. How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of xml (HTML) and a material theme.

note that the base codemirror.css file is required in all use cases

@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/material.css';
import CodeMirror from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');

props

proptype defaultcomponentsdescription
autoCursorboolean trueControlled UnControlledshould component cursor position correct when value changed
autoScrollboolean trueControlled UnControlledshould component scroll cursor position into view when value changed
classNamestringControlled UnControlledpass through class class="react-codemirror2 className"
defineModeobjectControlled UnControlledpass a custom mode via {name: 'custom', fn: myModeFn}
detachbooleanUnControlledshould component ignore new props
optionsobjectControlled UnControlledcodemirror configuration
valuestring*Controlled UnControlled* component value must be managed for controlled components

props cont. (wrapped codemirror programming api)

  • cursor - setCursor

    will programmatically set cursor to the position specified

<CodeMirror
  [...]
  cursor={{
    line: 5,
    ch: 10
  }}
  onCursor={(editor, data) => {}}
/>
  • scroll - scrollTo

    will programmatically scroll to the specified coordinate

<CodeMirror
  [...]
  scroll={{
    x: 50,
    y: 50
  }}
  onScroll={(editor, data) => {}}
/>
  • selection={{ranges: array<{anchor, head}>, focus?: boolean} - setSelections

    will programmatically select the ranges specified

<CodeMirror
  [...]
  selection={{
    ranges: [{
      anchor: {ch: 8, line: 5},
      head: {ch: 37, line: 5}
    }],
    focus: true // defaults false if not specified
  }}
  onSelection={(editor, data) => {}}
/>

events

eventcomponentsdescription
editorDidAttach(editor)UnControlledcomponent is now responding to new props
editorDidConfigure(editor)Controlled UnControlledcomponent configuration has been set
editorDidDetach(editor)UnControlledcomponent is now ignoring new props
editorDidMount(editor, next)Controlled UnControlled* invoking optional next will trigger editorDidConfigure
editorWillUnmount(editor)Controlled UnControlledinvoked before componentWillUnmount
onBeforeChange(editor, data, value, next)Controlled UnControlled if used, next is returned via UnControlled and must* be invoked to trigger onChange
onChange(editor, data, value)Controlled UnControlledthe component value has been changed

events cont. wrapped codemirror events

FAQ

  • Is server side rendering supported?

Yes. react-codemirror2 will prevent rendering in absence of navigator. You can also force the component to not render via a PREVENT_CODEMIRROR_RENDER global.

  • How can I get the instance?

The recommended technique to get the instance is to persist the editor returned via event callbacks. There is no static method to get it on demand, e.g. CodeMirror.getInstance(). Example...

constructor() {
  this.instance = null;
}

render() {
  <CodeMirror editorDidMount={editor => { this.instance = editor }}/>
}
  • How can I have a resizable editor?

Check out bokuweb/re-resizable. Wrapping your component with <Resizable/>'s works well

Contributing

Pull Requests are welcome. Be mindful of the availbe scripts below to help submitting a well-received contribution.

  • npm run start to run the app on localhost:8000
  • npm run webpack to re-bundle the react app
  • npm run test to ensure tests continue to pass
  • npm run build to generate the demo bundle

note that it's necessary to bump the package.json version prior to final npm run build so we can grab the proposed new version as seen in the demo header. Also note, the core changes are to be made in src/index.tsx as ./index.js and ./index.d.ts are generated

MIT © 2018 scniro