npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@remirror/styles

v3.0.0

Published

Styles for every remirror package.

Downloads

57,033

Readme

@remirror/styles

Styles for every remirror package.

Version Weekly Downloads Bundled size Typed Codebase MIT License

Installation

# yarn
yarn add @remirror/styles

# pnpm
pnpm add @remirror/styles

# npm
npm install @remirror/styles

Depending on how you want to consume the styles there are some peer dependencies that might be required. Any additional packages are listed in their relevant section.

Usage

The styles for this package can be used with plain css, the dom using emotion, react using @emotion/styled and styled-components.

CSS

After installation you can select the css files that you need for your project.

@import '@remirror/styles/extension-placeholder.css';
@import '@remirror/styles/core.css';

Or if your build system allows it.

import '@remirror/styles/core.css';

If you're not worried about bundle size you can also import all styles for all the extensions and packages.

import '@remirror/styles/all.css';

DOM

Install the addition required dependency.

# yarn
yarn add emotion

# pnpm
pnpm add emotion

# npm
npm install emotion

This is useful when using the pure dom to control styles.

import { createDomEditor, createDomManager } from 'remirror/dom';
import { BoldExtension } from 'remirror/extensions';
import { addStylesToElement, allStyles } from 'remirror/styles/dom';

const manager = createDomManager(() => [new BoldExtension()]);
const wrapperElement = document.createElement('div');
const editor = createDomEditor({ manager, element: wrapperElement });

addStylesToElement(wrapperElement, allStyles); // Styles added to element.

The above snippet will add all styles to the element and all elements it contains.

styled-component

This is designed to be used in a react app that already consumes styled components and the components can be used to wrap your editor, providing automatically scoped styles.

Make sure you have styled-components installed. And then import either the styled css or the styled component.

import React from 'react';
import { CoreStyledComponent, coreStyledCss } from '@remirror/styles/styled-components';

import { MyEditor } from './my-editor';

const StyledWrapper = () => (
  <CoreStyledComponent>
    <MyEditor />
  </CoreStyledComponent>
);

The above will provide the styles to your editor component and since it is a styled component you can use the as prop to define it as you wish.

@emotion/styled

This is designed to be used in a react app that already consumes uses @emotion/core and @emotion/styled. Make sure both of these are installed before getting started

import React from 'react';
import { CoreStyledComponent, coreStyledCss } from '@remirror/styles/emotion';

import { MyEditor } from './my-editor';

const StyledWrapper = () => (
  <CoreStyledComponent>
    <MyEditor />
  </CoreStyledComponent>
);

This is very similar to the styled-components entry point and will provide the styles to your editor component.