https://github.com/SenseNet/sn-controls-react

React controls for sensenet
https://github.com/SenseNet/sn-controls-react

controls ecm react reactjs sensenet

Last synced: about 2 months ago
JSON representation

React controls for sensenet

• Host: GitHub
• URL: https://github.com/SenseNet/sn-controls-react
• Owner: SenseNet
• License: gpl-2.0
• Archived: true
• Created: 2017-05-23T13:29:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-11T12:08:44.000Z (almost 6 years ago)
• Last Synced: 2024-04-09T03:04:29.330Z (5 months ago)
• Topics: controls, ecm, react, reactjs, sensenet
• Language: TypeScript
• Homepage:
• Size: 426 KB
• Stars: 2
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sn-controls-react

------

### This package is not under active development. You can find our latest packages in the [sensenset/sn-client](https://github.com/sensenet/sn-client) monorepo.

------

[![Greenkeeper badge](https://badges.greenkeeper.io/SenseNet/sn-controls-react.svg)](https://greenkeeper.io/)

[![Join the chat at https://gitter.im/SenseNet/sn-controls-react](https://badges.gitter.im/SenseNet/sn-controls-react.svg)](https://gitter.im/SenseNet/sn-controls-react?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

[![License](https://img.shields.io/github/license/SenseNet/sn-controls-react.svg?style=flat)](https://github.com/SenseNet/sn-controls-react/LICENSE.txt)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat)](http://commitizen.github.io/cz-cli/)

Collection of [React](https://facebook.github.io/react/) components for [sensenet ECM](https://www.sensenet.com/) with [Material-UI](https://github.com/mui-org/material-ui)

[![Sense/Net Services](https://img.shields.io/badge/sensenet-7.0.0--beta3%20tested-green.svg)](https://github.com/SenseNet/sensenet/releases/tag/v7.0.0-beta3)

## Usage and installation

You can install the latest version from NPM

```

npm install --save sn-controls-react

```

You can import fieldcontrol and viewcontrol components into your React App the conventional way.

```ts

import { NewView, EditView, CommandButtons } 'sn-controls-react';

...

```

## View Controls

View Controls are almost the same as the .ascx [Content Views](http://wiki.sensenet.com/Content_View) in [sensenet Webpages](https://github.com/SenseNet/sn-webpages). This components define how the given Content will be rendered. As a Content is built up of Fields the View Control displays the Content using Field Controls to provide a surface to display/modify the Field values of the Content. View Control therefore depends on the Content Type of the specific Content.

### Content creation form (NewView)

```tsx

import { NewView } from 'sn-controls-react'

import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

// content: Content | required  | empty Content Object

// history: history Object made with createBrowserHistory() | optional | called after submit | default: window.history.back()

// onSubmit: Function | optional | called on submit event | default: window.history.back()

 {})} />

```

### Content editor form (EditView)

```tsx

import { EditView } from 'sn-controls-react'

import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

// content: Content | required  | empty Content Object

// history: history Object made with createBrowserHistory() | optional | called after submit | default: window.history.back()

// onSubmit: Function | optional | called on submit event | default: window.history.back()

 {})} />

```

### Content browse view (BrowseView)

```tsx

import { BrowseView } from 'sn-controls-react'

// content: Content | required  | empty Content Object

```

## Field Controls

Just as legacy controls in [sensenet Webpages](https://github.com/SenseNet/sn-webpages) Field Control components provide GUI for setting/modifying Field values of a Content but this time not as .ascx views but [React](https://facebook.github.io/react/) Components.