react-css-nocode-editor is a React CSS code editor package that allows you a user friendly way to edit a CSS string in your React application. It provides the user with sliders, color pickers, keyboard navigation and a nice customizable UI so it's easy to plug in to any application.
Read more for visual examples of the editor and how to configure it.
npm install react-css-nocode-editor --save
yarn add react-css-nocode-editor
NPM: https://www.npmjs.com/package/react-css-nocode-editor
GitHub: https://github.com/DJanoskova/CSS-NoCode-Editor
Example: https://react-css-nocode-editor.netlify.app/
import { useState } from 'react';
import { CSSBuilder } from 'react-css-nocode-editor';
const styleString = `
background-color: var(--primary);
opacity: 0.5;
color: #ffffff;
padding-top: 40px;
text-align: center;
width: 200px;
height: 200px;
border-radius: 50%;
box-sizing: border-box;
`
const App = () => {
const [style, setStyle] = useState(styleString);
return (
<CSSBuilder style={style} onChange={setStyle}/>
)
}
export default App;Fork this repository and run
yarn install(install dependencies for the editor)yarn build(build the editor source)cd exampleyarn install(install dependencies for the example - editor is installed locally)yarn start
The source is localed in ./example/src/App.tsx
import { useState } from 'react';
import { ThemeType } from 'react-css-nocode-editor';
const darkTheme: ThemeType = {
radius: 2,
shadow: '0 3px 10px rgba(255, 255, 255, 0.2)',
fontSize: '14px',
spacing: 10,
accent: 'limegreen',
color: 'white',
inputBg: '#79f179',
inputColor: '#000000',
};
const App = () => {
const [style, setStyle] = useState(styleString);
return (
<div style={{ background: '#111' }}>
<CSSBuilder style={style} onChange={setStyle} theme={darkTheme} />
</div>
)
}
export default App;Every property in the ThemeType is optional. What's not provided is inherited from defaultTheme.
const defaultTheme = {
accent: '#0096ff',
background: '#ffffff',
color: '#000000',
inputBg: '#f3f4f8',
inputColor: '#000000',
inputError: '#e3005e',
shadow: '0 5px 10px rgba(0, 0, 0, 0.04)',
radius: 4,
spacing: 8,
fontSize: '13px',
}If you want two-way binding for your editor, for a state that's also being changed externally, use the reactive prop, which is false by default for performance reasons
import { useState } from 'react';
import { CSSBuilder } from 'react-css-nocode-editor';
const App = () => {
const [style, setStyle] = useState('');
return (
<CSSBuilder style={style} onChange={setStyle} reactive />
)
}
export default App;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent