react-inline-edit
Inline editing for react.
installation
npm install -S @jswork/react-inline-edit
usage
- import css
@import "~@jswork/react-inline-edit/dist/style.css";
// or use sass
@import "~@jswork/react-inline-edit/dist/style.scss";
// customize your styles:
$react-inline-edit-options: ()
- import js
import React, { useState, useEffect } from 'react';
import ReactInlineEdit from '@jswork/react-inline-edit';
import styled from 'styled-components';
import '../../src/components/style.scss';
const Container = styled.div`
width: 80%;
margin: 30px auto 0;
`;
export default () => {
const [value, setValue] = useState('Hello inline edit');
useEffect(() => {
console.log('value changed:', value);
}, [value]);
return (
<Container>
<ReactInlineEdit value={value} onChange={(e) => setValue(e.target.value)} />
</Container>
);
};
preview
license
Code released under the MIT license.